首页 > 其他 > 详细

VUE中通过改变key去更新局部dom

时间:2020-06-20 14:52:07      阅读:104      评论:0      收藏:0      [点我收藏+]

在使用Elemen-UI中el-select时

代码如下↓

<!-- selected -->
<el-select
    v-if="item.columnType === ‘selected‘"
    :key="updates"
    v-model="scope.row[Object.keys(item)[0]]"
    placeholder="请选择">
    <el-option
        v-for="v in selectData[Object.keys(item)[0]]"
        :key="v.value"
        :label="v.name"
        :value="v.value">
    </el-option>
</el-select>

  因为项目需求这是嵌套在表格里的动态渲染的组件,option也是动态的,当<el-option>中的for循环selectData[Object.keys(item)[0]]赋上值之后,点击下拉并不会出现选项

其实已经有值了,但是dom没更新,所以下拉框就没有值

这个时候,我在el-select上加了个key并给个初始值updates,当我给<el-option>中的for循环selectData[Object.keys(item)[0]]赋上值之后,改变updates的值,这时候vue就会去更新dom

this.selectData[item.columnName] = res;
 // 强制刷新select下拉dom
this.updates = this.updates++;

  在vue的机制里当key变化时dom会被刷新,问题也就解决了

good!

技术分享图片

 

VUE中通过改变key去更新局部dom

原文:https://www.cnblogs.com/bobo1/p/13168499.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!