CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Anjo Bautista Liwanag
Anjo Bautista Liwanag

Reputation: 129

Trying to change data inside @click inside v-for

i have a v-for loop as my selection for dialog boxes I want to open

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

page.model is my v-model for a v-dialog

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

howcome @click="page.model = true" doesn't work but @click=dialog1 = true " does? I also tried :@click="page.model = true" and @click="${page.model} = true"

Thank you in advance

Upvotes: 0

Views: 38

Answers (2)

Patfreeze
Patfreeze

Reputation: 720

So we dont see your modal HTML so I presume something like this:

<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;
    }
  },

Upvotes: 1

Kyle Zimmer
Kyle Zimmer

Reputation: 1

I have done something similar. Call a method and pass index of item. In the method you can then access the specific model via index

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

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

Upvotes: 0

Related Questions