vue2 element-ui el-checkbox视图不更新问题及解决

vue2 element-ui el-checkbox视图不更新

今天在开发过程发现一个问题，如标题所描述的，我在更改了data(){return{}}里的数据后， 也就是对 el-checkbox 的 v-model 绑定了一个 data() 里面的数据，与之对应的视图没有发生变化

我之所以 断定 我data() 里的数据发生了变化，而视图没有发生变化，是因为 在chrome 的 插件 vue devtools 中 确认了 data() 数据是发生了改变， 也就证明el-checkbox 的v-model绑定的boolean 值发生了改变，此时视图应该 按照 v-model="false" ==> v-model="true" 从 未勾选状态==>勾选状态 但是 页面一直没有更新。

在确认自己不是因为低级错误而导致的 视图不更新后， 对该问题进行了 不同的处理

1： 百度： 使用 $set() 、使用froceUpdate() 这两者都不起作用

既然 已经明确了 数据是发生了变化，依赖数据的视图没有发生改变， 那么 可以通过 较为偏激的方法 用v-if="true" / v-if="false" 的方法 将组件销毁再重新挂载， （此种方法过于 偏激，而且相对另类 不推荐使用）

既然有通过 v-if 的方法 强行让 元素重新渲染，那么 是否可以利用 vue 的一些特性进行类似的操作呢？

我个人观点

vue 响应式 可以通过 数据驱动页面的更新 加上 diff算法， 可以试着给 el-checkbox 组件 一个 无关紧要的属性

例如 ：

data-xxx=“响应式数据” 通过更改 该响应式数据 让vue 在进行diff算法中，发现虚拟Dom el-checkbox 的其中一个 data-xxx 属性发生变化，从而 让其触发该组件的 渲染，以达到 v-model 绑定的值改变 所对应的 视图发生变化。

• 例子：

<el-checkbox v-model="list[index].obj[value].checked" :data-a="checked">

• 伪代码：

function changeValue(){
// 将 list[index].obj[value].checked 为 false 改为 true

this.list[index].obj[value].checked = true // 此时视图 并没有因为 数据的变化 而 从 未勾选变成勾选状态

// 更改一个 无关紧要的 数值
this.checked = !this.checked // 此处 无论checked 是什么 都不影响 目的是让vue 去重新渲染 el-checkbox 这个组件

}

总结

其实在一般的vue 开发中，如果 响应式数据 不是那种 非常复杂的数据类型一般不会出现响应式数据变化而视图不更行的情况，

但 上述例子中 list是一个数组，数组里面有多个属性，其中一个属性为一个对象，而我们需要改变的值就是这个对象的其中一个属性， 可能 在vue 的双向绑定中，

由于 list 是一个相对复杂的数据类型，当深层次里的属性发生了 改变， vue没法做到 数据驱动 视图更新，

当我们非常确认数据已经更新了， 仅仅是视图没有发生变化，此时 要做的就是 能让 视图发生改变的操作 通过改变一个无关紧要的 响应式数据 从而 让 组件进行 重新渲染操作 无疑是一个 不错的 解决方案

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论