$set的使用
在后台系统开发中,有些表格 需要在页面内更新,但是更新的值并不会实时的在页面中更新。
在vue
文档中有一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
也就是说当你在编辑表格中的数据后,点击保存,数据已经更新到数据库但是页面却并不会更新视图
那么正确的设置方式:
this.$set(this.data,"key",value')
受 ES5
的限制,Vue.js
不能检测到对象属性的添加或删除。因为 Vue.js
在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js
转换它,才能让它是响应的。
这里的data只是某个对象
例如
// 假如在data中有一个对象
formData:{
content: ''
}
// 那么在用$set的时候
this.$set(this.formData, 'content', 123123123)
this.$set(this.formData, 'content', res.data.detail.content)