Vueのは、データを変更、ページには問題は更新されません

より多くの記事

テーブル・コンポーネントを使用し、要素のUIでウェブサイトを開発する際に、最近、時々1秒か2秒ページ変動が発生する遅延、見つかったデータの変更が終了。

コードを見て、データを変更するコードは、そのようなものであるが見つかりました。

// popupData是修改的数据，修改完后，赋值给对应的表格数据
this.tableData[this.currentRow] = this.popupData

注意事項（以下はからの抜粋である公式ドキュメント）

JavaScriptの制限のため、Vueが次の配列の変化を検出することはできません。

1. あなたは、配列の項目を設定するために、直接インデックスを使用する場合、例えば：vm.items[indexOfItem] = newValue
2. あなたは、例えば、配列の長さを変更する場合：vm.items.length = newLength

例えば：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

最初のカテゴリを解決するために、次の2つの方法が実現できるとvm.items[indexOfItem] = newValueも同様の効果がステータス応答システムで更新をトリガします。

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

また、使用することができるvm.$setグローバルな方法であるインスタンスメソッド、Vue.setエイリアスのを：

vm.$set(vm.items, indexOfItem, newValue)

問題の第二のタイプを解決するためには、使用することができますsplice：

vm.items.splice(newLength)

だから、解決策を使用することですVue.setへの直接代入するのではなく、

this.$set(this.tableData, this.currentRow, this.popupData)