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动态改变数据，必须是响应式，不然不可以实时更新数组视图