VuejsとVue.set（）、更新配列

Question

私はVuejsを初めて使いました。何かを作ったが、私はそれが単純な/正しい方法であるかどうかわからない。

は私が

を望むものを、私は、配列内のいくつかの日付をしたいし、イベントにそれらを更新します。まずはVue.setを試しましたが、うまくいきません。今私の配列項目の変更後：

this.items[index] = val; 
this.items.push(); 

を私は（プッシュ）配列には何も、それは...更新します。しかし、時には最後の項目が非表示になり、何とか...私は、このソリューションは少しハックだと思いますどうすれば安定させることができますか？

シンプルなコードはここにある：

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    \t f: 'DD-MM-YYYY', 
 
    items: [ 
 
     "10-03-2017", 
 
     "12-03-2017" 
 
    ] 
 
    }, 
 
    methods: { 
 
    
 
    cha: function(index, item, what, count) { 
 
    \t console.log(item + " index > " + index); 
 
     val = moment(this.items[index], this.f).add(count, what).format(this.f); 
 
    \t \t this.items[index] = val; 
 
     this.items.push(); 
 
     console.log("arr length: " + this.items.length); 
 
    } 
 
    } 
 
})

ul { 
 
    list-style-type: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
 
<div id="app"> 
 
    <ul> 
 
    <li v-for="(index, item) in items"> 
 
    <br><br> 
 
     <button v-on:click="cha(index, item, 'day', -1)"> 
 
     - day</button> 
 
     {{ item }} 
 
     <button v-on:click="cha(index, item, 'day', 1)"> 
 
     + day</button> 
 
    <br><br> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

VueJSあなたは、このような配列を操作状態への変更ピックアップすることができない場合。

Common Beginner Gotchasで説明したように、pushやspliceなどの配列メソッドを使用して、a[2] = 2や配列の.lengthプロパティなどのインデックスを変更しないでください。ただ、この質問に来て他の人のためにそう

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    \t f: 'DD-MM-YYYY', 
 
    items: [ 
 
     "10-03-2017", 
 
     "12-03-2017" 
 
    ] 
 
    }, 
 
    methods: { 
 
    
 
    cha: function(index, item, what, count) { 
 
    \t console.log(item + " index > " + index); 
 
     val = moment(this.items[index], this.f).add(count, what).format(this.f); 
 

 

 
\t this.items.$set(index, val) 
 
     console.log("arr length: " + this.items.length); 
 
    } 
 
    } 
 
})

ul { 
 
    list-style-type: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
 
<div id="app"> 
 
    <ul> 
 
    <li v-for="(index, item) in items"> 
 
    <br><br> 
 
     <button v-on:click="cha(index, item, 'day', -1)"> 
 
     - day</button> 
 
     {{ item }} 
 
     <button v-on:click="cha(index, item, 'day', 1)"> 
 
     + day</button> 
 
    <br><br> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

。 Vue 2のある時点で表示されます。* this.items.$set(index, val)を削除してthis.$set(this.items, index, val)を得ました。

スプライスは依然として利用可能であり、ここには、配列linkで利用可能なアレイ突然変異法へのリンクがあります。

EDIT

vuexのためには、リンクのVue.set(state.object, key, value)