<html>
<head>
<title>How to Create 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">
<sample-exmaple></sample-exmaple>
</div>
</div>
</form>
</body>
<script>
Vue.component('sample-exmaple', {
data: function () {
return {
name: '',
role: 'Select'
}
},
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>',
methods: {
btnSubmit: function () {
alert(this.name)
alert(this.role);
}
}
})
var app = new Vue({
el: '#components-demo',
});
</script>
</html>