I have an array:
[{ title: 'title 1', options: ['a', 'b'] },
{ title: 'title 2', options: ['c', 'd'] },
{ title: 'title 3', options: ['e', 'f'] }]
And I render this array using v-for
:
<div v-for="(item, i) in content" :key="item.title">
<div>
<div>{{ item.title }}</div>
<div :class="{'selected-item': i === selectedIndex}">
{{ item.options[selectedOptionIndex] }}
</div>
</div>
</div>
When I change the value of the selectedOptionIndex
, it changes for each index (for title 1, title 2 and title 3). I want change option only for e.g title 1
. How I can fix it?