昨天项目有个需求,从接口获取数据后覆盖原来的数据,没多想,觉得很简单啊,直接赋值就覆盖原来的数据了,但是这么做后输入框突然不能输入值了,但是确实是有触发输入事件的,废话少说,上图。

 

这里的话,el-input绑定的是testItemValue,而这个值是包含在上图的list对象里的,我选择了直接覆盖list对象,这时候造成了list[index]引用了item对象,而el-input绑定的还是原来的对象,输入的值也不会赋值给现在的对象,解决这个问题的方法就是遍历赋值,网上有些说用JSON.stringify和JSON.parse来进行深拷贝,这个也是不行的,这种深拷贝的方法也是直接引用了另一个对象,还是会有不能输入的问题,用下图这种方法就能轻松解决了(若两个对象的属性完全相同,也可以使用解构赋值)

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐