Vue列表实战教程

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();
})