Vue change the data, the page does not refresh problem

More Articles

Recently when developing a website with element-ui, use table components, finished modifying the data found, sometimes delay a second or two page variations will occur.

Looked at the code and found the code to modify the data is such that

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

Notes (the following is an excerpt from the official documentation )

Due to JavaScript restriction, Vue can not detect changes in the following array:

1. When you use the index directly to set an array item, such as:vm.items[indexOfItem] = newValue
2. When you modify the length of the array, for example:vm.items.length = newLength

for example:

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

In order to solve the first category, the following two methods can be realized and vm.items[indexOfItem] = newValuethe same effects will also trigger updates in the status response systems:

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

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

You can also use the vm.$setinstance method, which is a global method Vue.setfor an alias:

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

To solve the second type of problem, you can use splice:

vm.items.splice(newLength)

So, the solution is to use Vue.setinstead of the direct assignment to

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