1.问题描述
直接修改数组某一项的值,数据变化后ui并不跟着变化

2.解决方案,要用到,数组更新检测
错误的代码

setOptionVal: function (index, val) {
  this.SubjectListData[index].optionIdStringResult = val
}

正确的代码

setOptionVal: function (index, val) {
  let tempVal = this.SubjectListData[index]
  tempVal.optionIdStringResult = val
  this.$set(this.SubjectListData, index, tempVal)
}

3.方案总结,可采取下面三种解决方案:
Vue.set()
Object.assign()
$forceUpdated()

Vue.set()

this.$set(this.item,'newProperty','新值')

Object.assign()
直接使用Object.assign()添加到对象的新属性不会触发更新
比如这样

Object.assign(this.item,{newProperty:'新值'})

应创建一个新的对象,合并原对象和混入对象的属性

this.item = Object.assing({},this.item,{newProperty:'新值'})

$forceUpdate
如果你发现你自己需要在 Vue中做一次强制更新,99.9% 的情况,是你在某个地方做错了事
$forceUpdate迫使Vue 实例重新渲染
PS:仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

小结
如果为对象添加少量的新属性,可以直接采用Vue.set()
如果需要为新对象添加大量的新属性,则通过Object.assign()创建新对象
如果你需要进行强制刷新时,可采取$forceUpdate() (不建议)
PS:vue3是用过proxy实现数据响应式的,直接动态添加新属性仍可以实现数据响应式

相关链接:
https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
https://blog.csdn.net/a11979/article/details/122990172

作者 铁血 汉子 2019年2月14日
2024/03/29/02:03:52am 2019/2/14/7:56:12
0 3656