How to properly solve a problem with VueJS?

Question

JavaScript

The question is not only about VueJS.
The case is this:

<div v-for="day in days">
  <div v-for="item in items" v-if="$index < 3 || showItem[$index]">
    {{ item }}
  </div>

  <a @click="change($index)">Show</a>
</div>

This is how the skeleton of the project looks like. Approximately like this.
What's the point: in the link I'm passing $indexfrom day.
In nested divin, v-ifI show no more than three elements, but there is an OR condition - if showItem[$index] === true, then you still need to show the element, by default this parameter is false. And it changes by the Show button . There are as many elements in the
array as there are in . And here's the problem - I need to put $index from day in the showItem condition - how to do this? Although the solution to the correct display / hiding of elements is more likely to come here, but I'm still not on you with similar frameworks. showItemdays

Answer 1

<div v-for="(day_index, day) in days">
  <div v-for="(item_index, item) in items" v-if="item_index < 3 || showItem[day_index]">
    {{ item }}
  </div>

  <a @click="change(day_index)">Show</a>
</div>

vuejs.org/guide/list.html#v-for
Something like this, as far as I understand.