CODEWITHSUNDEEP
vue.jsvuetify.jsv-for
Jack Casas
Jack Casas

Reputation: 984

Vue Vuetify.Wrong index is passed to v-dialog when using v-for

So using v-for and v-dialog, my template looking like this:

  <v-list >
   <v-list-item v-for="(pool,indexp) in items[0].pools" :key="pool.name">
     <v-dialog :retain-focus="false" v-model="dialog" scrollable max-width="300px">
      <template v-slot:activator="{ on }">
       <v-btn color="primary" dark v-on="on">{{pool.name}}</v-btn>
        </template>
                <v-card><v-card-title>{{pool.name}}</v-card-title></v-card>
     </v-dialog>
    </v-list-item>
  </v-list>

So say the object I'm looping through has 2 elements, this generates 2 buttons that will activate the v-dialog. My problem is that when I click the first "pool" button, the name of the second pool is shown in the dialog. WHy?

I have this in codepen:

https://codepen.io/averied/pen/QWjXxop?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fdialogs%2F

Upvotes: 1

Views: 2294

Answers (1)

Daniel Smedema
Daniel Smedema

Reputation: 969

If you’re using the same boolean variable, dialog, for everything in the v-for as it appears to me, then activating one will activate them all. Later ones will be rendered over top of earlier ones. So in a two item list you’ll always see the second item.

You probably don’t need the v-model on the v-dialog at all; I’m fairly certain the v-dialogs can maintain their internal state just fine. Unless you’re programmatically triggering the dialogs through something other than your button in the activator slot, or if you need to display or save the state for some reason. If so, you’ll need to maintain a list of booleans, one for each pool. Could potentially be an attribute on the pool object.

Upvotes: 2

Related Questions