Vue不能检测到对象属性的添加或删除

有这样一个需求,列表项的新增和修改用了同一个弹窗,弹窗数据如下: form = { name: '', age: ' }, 绑定的表单,现在需要新增一个标题,this.form.title = '测试',发现input输入框无反应

说明

vue官方传送门检测变化的注意事项

原因

Vue 不能检测到对象属性的添加或删除,使用 this.form.title 相当于给原有对象 form 添加了一个 title 属性,Vue 并不能做到响应处理,所以这也是 Vue 中 data 数据初始化的目的

方案

  • 给整个对象重新赋值
this.form = {
  name: '', age: '', title: ''
}
  • 使用官方的$set
this.$set(this.form, 'title', '')

文章作者: 徐辉波
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 徐辉波 !
评论
 本篇
Vue不能检测到对象属性的添加或删除 Vue不能检测到对象属性的添加或删除
有这样一个需求,列表项的新增和修改用了同一个弹窗,弹窗数据如下: form = { name: '', age: ' }, 绑定的表单,现在需要新增一个标题,this.form.title = '测试',发现input输入框无反应 说
2019年11月05日
下一篇 
Git Commit 规范 Git Commit 规范
git commit的提交性质,类型如下 值 描述 feat 新增一个功能 fix 修复一个Bug docs 文档变更 style 代码格式(不影响功能,例如空格、分号等格式修正) refactor 代码重
2019年10月09日