Vue v-for循环渲染按钮点击后所有v-dialog弹窗同时打开如何解决？

问题原因 #

你在循环中渲染的所有弹窗都绑定了同一个全局布尔变量more，只要该变量值变为true，所有关联的弹窗都会同时触发显示，这就是你点击任意按钮所有弹窗一起打开的原因。

修复方案 #

我们可以用变量存储当前需要打开的弹窗的索引，而非统一的布尔值，修改后的代码如下：

模板代码 #

<v-col v-for="(goal, i) in goals" :key="i">
  <v-card>
    <v-card-actions>
      <v-btn @click="activeDialog = i">
        Подробнее
      </v-btn>
    </v-card-actions>
  </v-card>
  <v-dialog v-model="activeDialog === i">
    <v-card>
      <v-btn @click="activeDialog = null">
         Agree
      </v-btn>
    </v-card>
  </v-dialog>
</v-col>

脚本代码 #

<script>
export default {
  data: () => ({
    activeDialog: null,
  }),
}
</script>

效果说明 #

• 点击按钮时将当前项的索引赋值给activeDialog，只有匹配对应索引的弹窗v-model判定为真，单独弹出
• 点击弹窗内的关闭按钮时将activeDialog重置为null，弹窗关闭

问题相关截图 #

内容的提问来源于stack exchange，提问作者Lev Vorobev