ヴューのデータ更新

Vueの配列を更新

アレイ更新監視

Vueの配列が観測された変動方式のセットが含まれ、彼らはまた、ビューの更新をトリガします。次のようにこれらのメソッドは、次のとおりです。

• 押す（）
• ポップ（）
• シフト（）
• アンシフト（）
• スプライス（）
• ソート（）
• 逆（）

ここで私は例があります。

これは、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=[];

（）配列要素がプッシュで更新 あなたは直接ビューを更新することができます

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

ここでは画像の効果があります

」を検索、検索]をクリックしますA「キーワード

注意：

Vueが動的にそれ以外の場合は、配列のリアルタイムビューで更新することができない、それが応答する必要があり、データの変更
にようこそ私のブログ