<html>
<head>
<title>How to Create X-Template Component in Vue js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<form id="form1">
<div>
<div id="components-demo">
<user-example></user-example>
</div>
</div>
</form>
</body>
<script type="text/x-template" id="User-template">
<div class="col-md-12"><div class="col-md-6"><table class="table table-bordered" id="Add">
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tr>
<td>
<input type="text" id="txtname" v-model="name" name="name" value="" />
</td>
<td>
<select id="ddlRole" v-model="role">
<option value="Select">Select</option>
<option value="Admin">Admin</option>
<option value="Member">Member</option>
' <option value="Vice-Admin">Vice-Admin</option>
</select>
</td>
</tr>
</table>
<button type="button" id="btnSubmited" class="btn btn-circle-bottom" @click="btnSubmit"> Submit </button>
</div></div>
</script>
<script>
Vue.component('user-example', {
template: '#User-template',
data: function () {
return {
name: '',
role: 'Select'
}
},
methods: {
btnSubmit: function () {
alert(this.name)
alert(this.role);
}
}
});
var app = new Vue({
el: '#components-demo',
});
</script>
</html>