V-のバインド列、ページのデータが更新されていない配列の変化(解決済み)でVUE

V-のバインド列、ページのデータが更新されていない配列の変化(解決済み)でVUE

問題の説明:

用VスルーVUE {{}}またはv-model配列内のページの一部、配列の値の変更をバインドするとき、ページが更新されません。簡単な例を与える:
ここで配列を定義、一つの要素を使用して、それぞれ、1に設定されている{{}}v-model配列要素の結合arr[0]、集合button、バインドクリックイベントを、アレイに+1の値をみましょう。ここで使用されていませんv-for、それはすべて同じ質問です。
我々は現在の配列を印刷するには、ボタンをクリックすると、配列の発見は変更されているが、ページにも変更されません。
絵

理由

ここでは、印刷の配列の値が変更された参照が、ページは変更されません。
試験は、直接配列要素の割り当てとは、VUEのコンピューティング操作がないことが示さまたは配列の変化をモニターしました。
原因はJavaScriptの制限のために、配列は、Vueのは変化し、検出することができません
あなたが直接使用するキーインデックスを設定すると、例えば:vm.items [indexOfItem] = newValueに
あなたが例えば、配列の長さを変更する場合:vm.items.length = newLengthを

解きます

VUEの公式ドキュメントによると:変分法Vueの配列は、観測のセットが含まれ、これらは、ビューの更新をトリガします。これらの方法は次の通りです:push() pop() shift() unshift() splice() sort() reverse()
私たちは、リアルタイムでページを更新したいときに、あなたは上記の方法を使用する必要があります。
例えば:私たちは、編集機能のカートの数を実現するときは、V-のためにより配列内のデータをレンダリングする必要があります。
ここに画像を挿入説明
我々はによって、プラスまたはマイナスをクリックするとthis.numberArr.splice(index, 1, sum);スプライス法により配列を変更します。あなたはV-のインデックスにクリックイベントをバインドすると機能をクリックして渡されました。

<span @click="alertNumber(index, false)">-</span>
<input type="tel" v-model="numberArr[index]">
<span @click="alertNumber(index, true)">+</span>

アレイへと挿入スプライスを介して現在の配列要素の値、それに応じて、この計算方法を保存する関数を計算する前に。

リリース6元記事 ウォンの賞賛6 ビュー344

おすすめ

転載: blog.csdn.net/qq_42586895/article/details/104080463