dynamic Dialogs with vuejs

Question

I have an array with objects. The information of each object will be show in a individual v-card for each object. In each v-card there is a v-btn with a v-dialog that show information of the same object that it belongs, (here is my trouble). When i click any v-btn does not show it's infromation on the v-dialog, does show the other's objects information.

Hope any can help, i have tried different ways wit out success. Here is my code:

<template>
  <v-layout justify-center align-center wrap>
    <v-flex xs12 sm6>
      <v-card v-for="(item, index) in ordenes" :key="index">
       <v-card>
              {{ item.date }} <!-- works ok -->
        <template>
         <v-dialog v-model="dialog" persistent max-width="290">
           <template v-slot:activator="{ on }">
             <v-btn v-on="on" class="caption" small>Form info</v-btn>
           </template>
           <v-card>
            <tr>{{ montoTot(item) }}</tr> <!-- here is the problem, in each click show different data-->
           </v-card>
         </v-dialog> 
      </template>
    </v-card>
   </v-card>
  </v-flex>
 </v-layout>
</template>

the script:

export default {
    data () {
      return {
        dialog: false,
        ordenes: [{ date: 1, price: 1},
                  { date: 2, price: 2},
                 ],
      }
    },
     methods: {
      montoTot (item) {
          var mT = 10 + item.price
          return mT
      },    
 }

Vikum Dheemantha · Accepted Answer · 2021-02-06 08:31:23Z

In your code, it generates several v-dialogs for each card but all of them are connected to the same v-model dialog. With this, there is a chance to open not only the desired dialog but other dialogues as well.

We can try to avoid several approaches to fix this issue. one way is to use only one dialog and populate data accordingly as following,

instead of create separate dialogs for each card you can create one dialog as following,

<template>
  <v-layout justify-center align-center wrap>
    <v-flex xs12 sm6>
      <v-card v-for="(item, index) in ordenes" :key="index">
       <v-card>
              {{ item.date }} <!-- works ok -->
        <template>
         <v-btn @click.stop="triggerDialog(item)" class="caption" small>Form info</v-btn>
      </template>
    </v-card>
   </v-card>
  </v-flex>

  <v-dialog v-model="dialog" persistent max-width="290">
      <v-card>
          <tr>{{ montoTot(selectedItem) }}</tr>
      </v-card>
  </v-dialog> 
 </v-layout>
</template>

and create a method to toggle the dialog to activate the dialog and assigned the selected item data to the dialog in the methods section.

triggerDialog(item) {
    this.selectedItem = item; // have to define in data section.
    this.dialog = true; // activate dialog after assigning selected items
}

check more in the documentation for how to activate dialog without activator.

Collectives™ on Stack Overflow

dynamic Dialogs with vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related