element-ui dialog 无法打开

Question

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

<div style="display: flex; align-items: center;" v-for="i of DialogList" :key="i.order">
        <el-checkbox v-if="!DeleteFlag" style="margin-right: 10px"></el-checkbox>
        <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
            <h1 @click="i.DialogFlag = !i.DialogFlag">{{ i.head?i.head:'标题'}}</h1>
            <el-progress :percentage="i.state" color="#000000" style="width: 20%"></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>

Answer 1

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

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