Attempting to manipulate information within the @click event handler embedded within a v-for loop

Question

Attempting to manipulate information within the @click event handler embedded within a v-for loop

I am using a v-for loop to select dialog boxes that I want to open.

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

In this code, page.model is being used as the v-model for a v-dialog component.

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

I'm wondering why @click="page.model = true" does not work, but @click=dialog1 = true " does? I also tried :@click="page.model = true" and @click="${page.model} = true"

Thank you in advance

javascript vue.js vuetify.js

Answer 1

Answer №1

Based on the provided code snippet, it seems like you have a modal setup where different pages are displayed within modals. Here is how you can achieve this:

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

<modal v-model="pages[0].isOpen">[CONTENT OF PAGE 1]</modal>
<modal v-model="pages[1].isOpen">[CONTENT 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 pages
    this.pages.forEach(el => el.isOpen = false);

    // Open the selected page
    const index = this.pages.findIndex(el => el.id == id);
    this.pages[index].isOpen = true;
  }
},

Answer 2

Based on the provided code snippet, it seems like you have a modal setup where different pages are displayed within modals. Here is how you can achieve this:

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

<modal v-model="pages[0].isOpen">[CONTENT OF PAGE 1]</modal>
<modal v-model="pages[1].isOpen">[CONTENT 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 pages
    this.pages.forEach(el => el.isOpen = false);

    // Open the selected page
    const index = this.pages.findIndex(el => el.id == id);
    this.pages[index].isOpen = true;
  }
},

Answer 3

Answer №2

There is a method that I have used before which involves calling a specific function and passing the item's index as a parameter. This way, you can access the model associated with that index within the method.

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

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

Answer 4

There is a method that I have used before which involves calling a specific function and passing the item's index as a parameter. This way, you can access the model associated with that index within the method.

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

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

Attempting to manipulate information within the @click event handler embedded within a v-for loop

Answer №1

Answer №2

Similar questions

How to align a div in the center of a cell with Bootstrap

Storing information upon refresh in Angular 8

What is preventing access to the global scope in this particular situation?

nextJS does not recognize the term 'Window'

Exploring the functionality of multiple index pages in angularjs

What is a more efficient method for structuring this React page while making an asynchronous request to the API?

Angular front-end rendering with Rails backend integration

In PATCH requests, JSON data is not transmitted through Ajax

Is it feasible to verify for vacant dates with a single click?

Stop node.js from automatically converting a nested object containing numeric keys into an array

How can I animate SVG paths to fade in and out sequentially?

Implementing image change on dropdown selection using jQuery click event

Dealing with JSON Stringify and parsing errors in AJAX

Obtaining a string from the String prototype can be achieved by using

Sending text from a Tinymce textarea using Laravel 4.2

Execute Javascript after modification of the DOM

React DnD now enables dragging an entire list of cards instead of just a single card

reconfigure components by resetting settings on a different component

Strategies for optimizing PPI and DPI in responsive design

Adjust Navbar Header Color Based on Screen Size