Vue.js 关于elment-ui对话框导致v-for指令不能正常工作的问题，求大佬解惑

• Z时代
• 2024-03-02
• 分类：IT

Vue.js+elment-ui，今天发现一个很奇怪的问题，v-for指令不能正常渲染，数据变更v-for没有得到更新，尝试在使用v-for指令的元素外面再套一层div，奇怪的事情发生了，v-for指令又能正常渲染了！！！

经过几番尝试，才发现是elment-ui的el-dialog组件导致的问题，触发条件是：

1. 使用v-for指令的元素下紧接着就是el-dialog组件；
2. el-dialog组件参数append-to-body为true；
3. el-dialog组件至少显示过一次。

代码如下：

<div v-for="i in arr" :key="i">{{ i }}</div>
<el-dialog append-to-body ...>...</el-dialog>

在线测试

这个应该是一个BUG，以下方法可以解决这个问题：

1. 使用v-for指令的元素外面套一层div；
2. el-dialog组件外面套一层div；
3. 使用v-for指令的元素和el-dialog组件之间有其他组件。

有没有大佬知道导致这个问题的原因是什么？烦请大佬帮忙分析一下，非常感谢！

回答：

还真是！！！ 插个眼

你把 append-to-body 去掉 也可以显示出来

以上是 Vue.js 关于elment-ui对话框导致v-for指令不能正常工作的问题，求大佬解惑 的全部内容， 来源链接： utcz.com/p/936286.html