Html代码
<tbody id="itemtr"> <tr is="item-row" v-for="item in items" v-on:editclick="editclick" v-on:removeclick="removeclick" v-bind:item="item"></tr> <!-- more data --> </tbody>
定义JavaScript模板
<script type="text/x-template" id="item-tr" >
<tr v-bind:id="'tr_' +item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<button v-on:click="editclick">编辑</button>
<button v-on:click="removeclick">删除</button>
</td>
</tr>
</script>
components组件
Vue.component("item-row", {
props: ["item"],
template: "#item-tr",
methods: {
editclick: function () {
this.$emit('editclick', this.item)
},
removeclick: function () {
this.$emit('removeclick', this.item)
}
}
})
Ajax请求数据
function loadItems() {
$.ajax({
method: "GET",
url: "/Article/getallArticle",
data: {},
success: function (backData) {
console.log(backData);
if (backData.code == 1) {
new Vue({
el: '#itemtr',
data: {
items: backData.data
},
methods: {
editclick: function (itemObject) {
console.log(itemObject)
},
removeclick: function (itemObject) {
console.log(itemObject)
}
}
})
} else {
layer.msg(backData.msg);
}
},
error: function (error) {
layer.msg(error.statusText);
}
})
}
执行函数
$(function () {
loadItems();
})