Почему цикл v-for Vue не работает для скрытых блоков?

Question

[danilr]

Есть массив, в шаблоне через v-for выводятся блоки с информацией из массива. В каждом из блоков есть попапы, скрытые через v-if. Проблема в том, что при открытии любого попапа из цикла - в ней выводится информация из последнего элемента массива. Как это исправить?

<div class="watch-box" v-for="(watch, index) in watches" :key="index">
<div @click.self="openColors()" v-if="isColor" class="callback-overlay" v-cloak>
                    <div class="colors-popup">
                        <img @click="openColors()" class="close-pop" src="img/close.png">
                        <img class="colors-popup-img" :src=`img/catalog/${watch.model}/group.jpg`>
                    </div>
                </div>
</div>

new Vue({
    el: root,
    data:{
        watches: apiWatch,
        isColor: false
    },
    methods:{
        openColors(){
          this.isColor = !this.isColor;
        },

Answer 1

[0xD34F]

Попапов много; свойство, управляющее их видимостью одно и по своему типу является логическим. Как вы собираетесь, имея в распоряжении всего два значения, управлять отображением 2, 3, 5, 1000 и т.д. элементов? Можно только показать всё/спрятать всё - поэтому вы и видите всегда последний элемент.

Разметку попапа выносите из цикла. Вместо логического значения храните объект (элемент watches, который хотите показать) или null (если в данный момент ничего показывать не надо):

data() {
  return {
    show: null,
    ...

Открытие попапа: @click="show = watch". Закрытие: @click="show = null". В шаблоне попапа исправляете watch на show: :src="`img/catalog/${show.model}/group.jpg`".

Comments

[danilr]

а если несколько попапов?

[danilr]

И если я вынесу за цикл разметку попапов, то как я присвою show = watch
watch же из цикла берется

[0xD34F]

danilr,

а если несколько попапов?

Давайте-ка без "если". Судя по показанному вами коду, не предполагается, что пользователь должен иметь возможность инициировать одновременное отображение нескольких попапов.

если я вынесу за цикл разметку попапов, то как я присвою show = watch

Вот этого я ждал. Условие отображения попапа - isColor. Все переключения isColor осуществляются по кликам на элементы, принадлежащие попапам. То есть, пользователь не имеет возможности открыть попапы. Не может элемент, инициирующий показ попапа, самому попапу принадлежать. Где-то вы наврали, или о чём-то умолчали. Думайте.

[danilr]

0xD34F, Нигде не наврал, не умолчал - выкинул из кода лишнее, не относящееся к этому.
Задача в общем такая - список блоков из массива, часть инфы должно выводиться в попапах, относящиеся к этому блоку. Как сделать правильно - не знаю.

[0xD34F]

danilr,

Нигде не наврал, не умолчал - выкинул из кода лишнее

Чё-то смеюсь. Из-за выкидывания "лишнего" вы у тех, кто ваш вопрос читает, создаёте ложное представление относительно функциональности своего приложения. То есть, вы и наврали, и умолчали одновременно. Когда же вы научитесь задавать вопросы?

Как сделать правильно - не знаю.

Так я же рассказал в своём ответе. Или вам мои ответы больше не нужны? Ах да, у вас же ещё проблема всплыла, как я мог забыть, цитата на бис:

если я вынесу за цикл разметку попапов, то как я присвою show = watch

Обработчик с этим присваиванием должен не к элементу внутри попапа цепляться, а снаружи. Где-то там (ещё повторное цитирование):

выкинул из кода лишнее

Вот в этом "лишнем" и ищите нужный вам элемент - он-то должен остаться внутри v-for.

[danilr]

ахахах, до меня дошло, кнопка вызова попапа - внутри цикла находится))
спасибо, ну а кто если не вы будете на мои вопросы отвечать))