Блог

Главная - Вопросы по программированию - использование v-диалога в цикле v-for перезаписывает событие щелчка для всех v-диалогов, кроме последнего, при использовании vuetify

использование v-диалога в цикле v-for перезаписывает событие щелчка для всех v-диалогов, кроме последнего, при использовании vuetify

#javascript #vue.js #vuetify.js

#javascript #vue.js #vuetify.js

Вопрос:

У меня есть приложение, которое использует Vuetify v-dialog в v-for цикле. Однако, хотя отдельные компоненты активатора отображаются корректно внутри каждого v-dialog , когда я нажимаю на один из чипов, он выдает событие щелчка для последнего v-chip , независимо от того, на какой чип я нажимаю..

Как будто все v-dialogs используют одно и то же событие щелчка для отправки данных из последнего v-chip .

Почему соответствующее событие щелчка для каждого v-dialog не вызывается при нажатии на чип?

Демонстрация: https://codepen.io/deftonez4me/pen/ExyQRxB

Ответ №1:

Просто используйте объект вместо массива и замените removeTagDialogs[removeTagDialogs.indexOf(tag.id)] на removeTagDialogs[tag.id] , в обоих местах.

Посмотрите, как это работает: https://codepen.io/andrei-gheorghiu/pen/WNxMyMa

Комментарии:

1. лично я бы использовал index (или iii в коде OP), а не tag.id в removeTagDialogs[iii] … поскольку, iii гарантированно будет уникальным в этом цикле, но tag.id зависит от данных

2. Я заметил. по какой-то причине он был сброшен. Я просто повторно применил все изменения. Теперь все должно быть хорошо.

3. Теперь я исправил комментарий: p о, но — есть мысли по поводу остальной части комментария?

4. Я не уверен, что использование массива и использование индекса элемента исправили бы это. Я постараюсь, чтобы убедиться.

5. @ J, мне кажется, что проблема связана с removeTagDialogs[removeTagDialogs.indexOf(tag.id)] синтаксисом. Не уверен, что v-model делает в <v-dialog> (здесь не большой поклонник Vuetify).