Linked buttons in a loop

user_16748341 0
Viewed 58

I want to make that when a button is clicked, a dialog appears associated only with this button. Now when clicked, they open all at once.

<v-col v-for="(goal, i) in goals" :key="i">
  <v-card>
    <v-card-actions>
      <v-btn @click="more = true">
        Подробнее
      </v-btn>
    </v-card-actions>
  </v-card>
  <v-dialog v-model="more">
    <v-card>
      <v-btn @click="more = false">
         Agree
      </v-btn>
    </v-card>
  </v-dialog>
</v-col>

<script>
export default {
  data: () => ({
    more: false,
  }),
}
</script>

click btn

4 dialogs

vuejs2 nuxt.js vue.js javascript
1 Answers

Try to replace true/false with id or index:

  data: () => ({
    goalId: null,
  }),

  <v-col v-for="(goal, i) in goals" :key="i">
    <v-card>
      <v-card-actions>
        <v-btn
          @click="goalId = i" //or goal.id
        >
          Подробнее
        </v-btn>
      </v-card-actions>
    </v-card>
    <v-dialog
      v-model="more" v-if="moreId === i"
    >
      <v-card>
          <v-btn
            @click="goalId = null"
          >
            Agree
          </v-btn>
      </v-card>
    </v-dialog>
  </v-col>
user_119891890
Related