Из-за чего не работает эта задумка?

Question

[xXRustamXx]

При нажатии на item должен появляться его модальное окно, вот ссылка: https://codepen.io/Metis/pen/mjryoz?editors=1010
P.S не понятно ведь это вроде не обьект, а массив, и по идее там должно быть все реактивным.......

Answer 1

[0xD34F]

Vue не может отследить прямую установку значения элемента массива по индексу. Так что замените

shower[index] = !shower[index]

на

$set(shower, index, !shower[index])

А ещё лучше - уберите массив shower и добавьте элементам items свойство show:

data: () => ({
  items: [
    { name: '...', show: false },
    { name: '...', show: false },
    ...
  ],
  ...
}),

<span @click="item.show = !item.show">{{ item.name }}</span>
<div class="dialog_show" v-if="item.show">{{ index }}</div>