Vue Vuetify. В v-dialog передается неверный индекс при использовании v-for - PullRequest
Новая
       84

Vue Vuetify. В v-dialog передается неверный индекс при использовании v-for

1 голос
/ 29 мая 2020

Итак, используя v-for и v-dialog, мой шаблон выглядит так: 

  <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>

Итак, скажем, объект, который я просматриваю, имеет 2 элемента, это генерирует 2 кнопки, которые активируют v -диалог. Моя проблема в том, что когда я нажимаю первую кнопку «пул», имя второго пула отображается в диалоговом окне. Почему?

У меня в коде:

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

1 Ответ

1 голос
/ 29 мая 2020

Если вы используете одну и ту же логическую переменную dialog для всего в v-for, как мне кажется, то активация одной активирует их все. Более поздние будут отображаться поверх более ранних. Таким образом, в списке из двух элементов вы всегда будете видеть второй элемент.

Возможно, вам вообще не нужна v-модель в v-диалоге; Я почти уверен, что v-диалоги могут нормально поддерживать свое внутреннее состояние. Если вы не запускаете диалоговые окна программным образом с помощью чего-то другого, кроме кнопки в слоте активатора, или если вам по какой-либо причине необходимо отобразить или сохранить состояние. Если это так, вам нужно будет вести список логических значений, по одному для каждого пула. Потенциально может быть атрибутом объекта пула.

...