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

Steps for removing routing in Angular 2 after setting the folder as a dependency for another project

An issue arises when using JSON.parse() with regular expression values

Vue.js - finding the route path using its name in Vue.js

Updating the state of a nested array using React Hooks

What steps are necessary to configure .eslintrc to identify the use of 'require'?

Send a triggering function to two separate components

What is the best way to transfer form input data from a child component to the parent component in React?

Unknown provider in Angular when using factory inside anonymous function wrapper

Deciphering the LocalDate and nested object array in an AJAX response

When using Angular 2, the array.splice() function is causing the elements to be removed from the

Divide information in the chart

NUXT: Module node:fs not found

The best practices for managing item spacing in React or React Native

Downloading multiple files on both iOS and Android devices

Is the memory efficiency of Object.keys().forEach() in JavaScript lower compared to a basic for...in loop?

What could be causing the malfunction of my Superfish menu in Firefox?

Accessing the path to an imported file in Node.js

What is the best way to compare a string with a specific object key in order to retrieve the corresponding value?

Vue.js: Can someone provide guidance on retrieving a list of component instances for a slot?

Getting into a slot within a nested component within the render function