Vue Vuetify.Wrong 使用 v-for 时将索引传递给 v-dialog

Question

因此使用 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>

所以说我正在循环的对象有 2 个元素，这会生成 2 个按钮来激活 v-dialog。我的问题是，当我单击第一个 "pool" 按钮时，第二个池的名称显示在对话框中。为什么？

我在 codepen 中有这个：

https://codepen.io/averied/pen/QWjXxop?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fdialogs%2F

Answer 1

如果您对我看来的 v-for 中的所有内容都使用相同的布尔变量 dialog，那么激活一个将激活它们。较晚的将呈现在较早的之上。因此，在包含两项的列表中，您总是会看到第二项。

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

Vue Vuetify.Wrong 使用 v-for 时将索引传递给 v-dialog

Vue Vuetify.Wrong index is passed to v-dialog when using v-for

vue.js

v-for

vuetify.js