
关于 vue2中 el-checkbox-group 动态更新选项 视图不更新的问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
最近在 el-dialog 中使用 el-checkbox-group 选项值为对象的时候 动态渲染选数据 视图不更新这个问题已经给折磨透了
数据不一样 但每次打开后的视图都不更新

我也是翻遍了很多问答 基本上给的方法都离不开以下这些方法
- 使用 this.$set()
- 使用 this.$froceUpdate()
- 使用 this.$nextTick(() => {})
但都没有实际的解决 遇到的问题
反复的排查之后确认了确实是数据有更新 仅仅只是 视图没有发生变化 觉得应该可以通过 “v-if” 来暴力解决问题(不推荐)
<el-dialog :title="' 选择发布人'" :close-on-click-modal="false" append-to-body :visible.sync="visible"
class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
<el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="120px" label-position="right">
<el-form-item label="发布人:" prop="publisherUserNames" v-if="visible">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="dataForm.publisherUserNames" @change="handleCheckedCitiesChange">
<el-checkbox v-for="item in userList" :label="item" :key="item.id">
{{ item.realName }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeSubmit()"> 取 消</el-button>
<el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">
确 定</el-button>
</span>
</el-dialog>
其他的数据处理操作按照正常的处理过程写就行了
后面也是有查阅到这位同志的帖子 vue2 element-ui el-checkbox 视图不更新问题
里面有很详细的解释说为什么会发生这样的问题(还是大佬厉害 得多学习) 确实可以这样做 但同样是不推荐 然而个人能力有限 并不能实现如他所示的效果 如果有同志有更好的方法 欢迎指正评论!
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐




所有评论(0)