Vue.js Vue Vuetify。使用v-for时向v-dialog传递了错误的索引

因此，使用v-for和v-dialog，我的模板如下所示：

  <v-list >
   <v-list-item v-for="(pool,indexp) in items[0].pools" :key="pool.name">
     <v-dialog :retain-focus="false" v-model="dialog" scrollable max-width="300px">
      <template v-slot:activator="{ on }">
       <v-btn color="primary" dark v-on="on">{{pool.name}}</v-btn>
        </template>
                <v-card><v-card-title>{{pool.name}}</v-card-title></v-card>
     </v-dialog>
    </v-list-item>
  </v-list>

{{pool.name}
{{pool.name}

假设我正在循环的对象有2个元素，这会生成2个按钮来激活v对话框。我的问题是，当我单击第一个“池”按钮时，对话框中会显示第二个池的名称。为什么?

我在代码笔里有这个：

---

如果您对v-for中的所有内容使用相同的布尔变量，

dialog

，则激活其中一个将激活所有内容。后期渲染将覆盖早期渲染。因此，在两项列表中，您将始终看到第二项

---

您可能根本不需要v对话框上的v模型；我相当肯定v-dialogs可以很好地保持其内部状态。除非您是通过激活器插槽中的按钮以外的其他方式以编程方式触发对话框，或者出于某种原因需要显示或保存状态。如果是这样，您需要维护一个布尔值列表，每个池对应一个布尔值。可能是池对象上的一个属性。

如何在没有v-model的情况下关闭v-dialog？在对话框外单击，与前面相同。如果您的实际代码比示例更复杂，并且您需要通过其他方式触发v-dialog关闭，您可以发布另一个codepen，我可能会给出更好的建议我需要对话框“持久”（模式），以便用户单击保存按钮。这是一个新的代码笔，感谢您的帮助：好的，您正在通过单击close按钮时调用的方法以编程方式触发对话框。您确实需要v-model，但是您的

dialog

应该是一个数组，并且您需要将索引传递给close方法，以便它可以关闭正确的对话框。我不得不使用

this.$set

来获得反应性，以获取变化，这可能与CodePen的环境有点奇怪有关。无论如何，这将满足您的需要：作为良好应用程序设计的一般规则，我建议您在开始处理维护并行阵列和传递索引时创建一个组件。