尝试在 v-for 中更改 @click 中的数据

Question

我有一个 v-for 循环作为我要打开的对话框的选择

<v-card @click="page.model = true">

page.model 是我的 v-dialog 的 v-model

  data() {
    return {
      dialog1: false,
      dialog2: false,
      pages: [
        {
          id: "1",
          model: "dialog1",
        },
        {
          id: "2",
          model: "dialog2",
        },
      ],
    };
  },

怎么 @click="page.model = true" 不起作用，而 @click=dialog1 = true " 却起作用？我也试过：@click="page.model = true" 和@click="${page.model} = true"

提前致谢

Answer 1

我也做过类似的事情。调用一个方法并传递项目的索引。在该方法中，您可以通过 index

访问特定模型

<v-card @click="updateDialog(index)">

updateDialog(i): {
  this.pages[i].model = true
}

Answer 2

所以我们没有看到您的模态 HTML 所以我推测是这样的：

<v-card v-for="page in pages" @click="changePage(page.id)">

<modal v-model="pages[0].isOpen">[CONTAIN OF PAGE 1]</modal>
<modal v-model="pages[1].isOpen">[CONTAIN OF PAGE 2]</modal>

  data() {
    return {
      pages: [
        {
          id: "1",
          model: "dialog1",
          isOpen: false,
        },
        {
          id: "2",
          model: "dialog2",
          isOpen: false,
        },
      ],
    },
  methods: {
    changePage(id) {
      // close all other modal page
      this.pages.each(el => el.isOpen = false);

      // open the good one
      const index = this.pages.findIndex(el => el.id == id);
      this.pages[index].isOpen = true;
    }
  },

尝试在 v-for 中更改 @click 中的数据

Trying to change data inside @click inside v-for

javascript

vue.js

vuetify.js