Say I have this data retrieved from my store:
const itemsData=[
{id:1,data:[...]},
{id:2,data:[...]},
{id:3,data:[...]}
]
I need to be able to produce an array from this data which looks something like this:
const itemsSelected=[
{id:1,selected:false},
{id:2,selected:false},
{id:3,selected:false}
]
And then I need to have this array, itemsSelected, accessible to determine the state of multiple different components in the template, for example:
<div v-for="item in itemsSelected" :key="item.id" :class="item.selected?'selected':''"></div>
I originally thought to use a computed property, but I need to be able to dynamically update the selected value of items in itemsSelected. However, I also want the array to be constructed based on data in the store, and it should add/remove items from itemsSelected whenever itemsData changes. How can I achieve these things together?