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

【问题标题】：Trying to change data inside @click inside v-for尝试在 v-for 中更改 @click 中的数据
【发布时间】：2023-03-21 18:50:01
【问题描述】：

我有一个 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"

提前谢谢你

【问题讨论】：

对不起，我应该澄清一下，我的 v-for 是：v-for="page in pages"
您可以编辑您的帖子以添加 v-for。

标签： javascript vue.js vuetify.js

【解决方案1】：

所以我们看不到您的模态 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;
    }
  },

【讨论】：

【解决方案2】：

我做过类似的事情。调用方法并传递项目的索引。在该方法中，您可以通过索引访问特定模型

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

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

【讨论】：