element-ui dialog 无法打开

v-for创建了多个el-dialog,同时每个el-dialogvisible.sync绑定的被迭代的数组元素的属性(i.DialogFlag
但问题是当我想要打开这个dialog的时候(点击h1),它的visible的值并没有改变,但i.DialogFlag已经改变了
按道理来说,它们两个的值应该是一样的,为什么有一个变了而另一个没变
代码如下

<div v-for="i of DialogList" :key="i.order">

<el-checkbox v-if="!DeleteFlag"></el-checkbox>

<div>

<h1 @click="i.DialogFlag = !i.DialogFlag">{{ i.head?i.head:'标题'}}</h1>

<el-progress :percentage="i.state" color="#000000"></el-progress>

</div>

<el-dialog

title="内容"

:visible.sync="i.DialogFlag"

width="80%">

<input type="text" v-model="i.head" placeholder="默认内容">

<input type="text" v-model="i.state" placeholder="默认状态">

<el-button slot="footer" @click="i.DialogFlag = !i.DialogFlag">关闭</el-button>

<el-button slot="footer" @click="TargetPost(i)">上传</el-button>

</el-dialog>

</div>

因为你的DialogList中的对象没有DialogFlag属性;
所以你这个地方应该这样写:

<h1 @click="$set(i,'DialogFlag',!i.DialogFlag)">{{ i.head?i.head:'标题'}}</h1>

回答

以上是 element-ui dialog 无法打开 的全部内容, 来源链接: www.h5w3.com/113616.html

回到顶部