Why doesn't this idea work?

Question

Vue.js

When you click on an item, its modal window should appear, here is the link: https://codepen.io/Metis/pen/mjryoz?editors=1010
PS It's not clear because it's not an object, but an array, and in theory everything should be reactive .......

Answer 1

Vue can't track directly setting the value of an array element by index. So replace it
shower[index] = !shower[index]
with Better yet, remove the shower array and add a show property to the items elements:
$set(shower, index, !shower[index])

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>