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