Vue + ElementUI el-input无法输入、修改、删除的问题

1、业务背景

查询资料此问题出现的原因是：vue页面进行数据渲染时，层次嵌套或者多重数据绑定导致该组件信息框数据不能被Vue实时监听到，以此出现了数据发生改变但页面上更新或删除对应信息框的数据毫无反应的现象，此时需要强制更新，重新渲染。

2、代码示例

1）核心代码

<el-input
  type="textarea"
  clearable
  placeholder="请输入测试文本："
  v-model="form.Message"
  @input="changeMessage($event)">
</el-input>

方法：

// 强制更新测试文本信息框的值
changeMessage() {
  this.$forceUpdate()
},

3、Vue官网文档和API

1）关于处理边界情况 - 强制更新

• 强制更新

  如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。

  你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。

  然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新，那么你可以通过 $forceUpdate()来做这件事。

2）$forceUpdate()

vm.$forceUpdate()

• 示例：

  迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

4、附录

除了强制更新还可以给对象新增属性，使用Vue.$set()

这里参考一个友友的链接：Vue-给对象新增属性（使用Vue.$set()）

Vue官方文档

1）处理边界情况 - 强制更新

2）#vm-forceUpdate

3）#Vue-set

以上就是Vue 强制更新vm.$forceUpdate()的介绍，做此记录，如有帮助，欢迎点赞关注收藏！