データはVueで修正されますが、ビュー自体は更新できません

クズども · 掲載地 2018/08/20 13:05:58

Vueではデータの変更がよく起こりますが、ビューは更新できないため、いくつかの状況をまとめました。

1. v-forで通過する配列の場合、配列内容がarr[0].xx =xxを使ってデータを変更した場合、vueはそれを検出できません配列データの変更:配列を操作するためにいくつかの手法を使い、データを変更する際にはVueで監視できない方法もあれば、監視可能な方法もあります

Vueは複数の配列操作関数をラップし、これらの方法で操作された配列は、データが変更された際にVueによって監視されます。

push()
ポップ()
shift()
unshift()
スプライス()
sort()
reverse()
vue2.0はまた、Vue.set(items, indexOfItem, newValue)を観察するメソッドも追加しています。
filter(), concat(), slice() 。これらは元の配列を変更するものではなく、常に新しい配列を返します。非ミューテーション方法を使う場合は、古い配列を新しい配列に置き換えることができます

Vueは以下の点を変更する配列を検出できません:

(1) インデックスで直接アイテムを設定する場合、vm.items[indexOfItem] = newValue
(2) 配列の長さを変更する場合、例えば vm.items.length = newLength

それでは早速、コードをアップロードしてレンダリングを添付してください:

ログインが見えます。

上記は、Vueがデータ変更を検知できない配列に対する2つの解決策です
コード内のadd()メソッドを

ログインが見えます。

リスト更新注記:ハイパーリンクのログインが見えます。配列更新検出
レスポンシブ原則の深掘り:ハイパーリンクのログインが見えます。

[ヴュー] データはVueで修正されますが、ビュー自体は更新できません

関連記事

閲覧したセクション