Vue array update

Array update monitoring

Vue array contains a set of observed variation method, they will also trigger view updates. These methods are as follows:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

Here I have an example:

This is the HTML page

<ul id="postList">
	<li v-for="item in items">
		<!-- 单个模块 -->
		<div class="postlist">
		</div>
	</li>
</ul>

This is the javascript code - by JQ ajax to submit a data

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

Send the data again

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