How to apply v-if to only one instance of v-for?

Question

Vue.js

I have a component in which, with the help of v-for, several blocks are displayed with titles and additional information.
On the block with additional info hangs v-if
On the wrapper of the block, a click handler that changes the boolean variable, depending on which the block with info is shown or hidden.

When I click on the block wrapper, all the elements created by the cycle are shown and hidden at once.
How can I make it show/hide only the clicked one?

https://codesandbox.io/s/blissful-https-zg4tg?file...

Answer 1

There are such options:

1. Make a component that will display the data of only one element of the array, move the show property to this component - each instance will have its own, independent of the others.
   
2. Make the show property an array, store in it the id of the elements whose data should be shown.
   
3. Let the elements of the array decide for themselves whether their contents should be displayed - add a show property to each of them.
   

This is if the data in each of the blocks should be displayed independently. If only one, then let the show property contain a reference to the corresponding array element or its index/id.