Vue之數據更新

Vue的數組更新

數組更新監測

Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

在此我有個例子：

這是HTML頁面

<ul id="postList">
	<li v-for="item in items">
		<!-- 單個模塊 -->
		<div class="postlist">
		</div>
	</li>
</ul>

這是javascript代碼–通過JQ ajax 提交獲取數據

	var vm=new Vue({
		el:'#postList',
		data:{
			items:[]
		}
	})

	function getPostList(){
			$.ajax({
				url:'postList.php',
				type: 'post',
				dataType: 'json',
				data: {
                    method:'list'
				},
				success: function(data){
					// 循環遍歷
					for(let index in data) {
						Vue.set(vm.items, index, data[index]);
					};
				},
				error: function(data){
					console.log('error');
				}
			 })
	}

這裏再次發送數據

    // 搜索
    function searchPostList(){

        var SearchVal=$('input[name=Search]').val();
		if(SearchVal!=""){
            $.ajax({
                url:'postList.php',
                type: 'post',
                dataType: 'json',
                data: {
                    method:'search',
                    SearchVal:SearchVal
                },
                success: function(data){
                    console.log('data'+data);
					// 清空一次數組
					vm.items=[];
                    // 循環遍歷新數組
                    for(let index in data) {
						vm.items.push(data[index]); 
                    };

                    // vm.$forceUpdate();
                    console.log('item'+vm.items);
                },
                error: function(data){
                    console.log(data);
                }
             })
		}
		else{
			getPostList();
		}
    }

這兒清空了一次數組元素

// 清空一次數組
vm.items=[];

用Push()更新數組元素 可以直接更新視圖

vm.items.push(data[index]); 

這兒是圖片效果

點擊搜索，搜索 “一”關鍵字

注：

Vue動態改變數據，必須是響應式，不然不可以實時更新數組視圖