I'm currently creating a loop to display a list of available items along with checkboxes so that the user can select the ones they want.
For instance, here is an example of the allAtivos data:
"allAtivos": [
{ "id": 1, "title": "Amazon" },
{ "id": 2, "title": "Google" },
]
My challenge lies in the fact that I need to compare this data with another structure in order to determine which items have already been selected.
Take a look at the user's myAtivos data below (note that the Ativo item is a sub-object):
"myAtivos": [
{
"ativo": {
"id": 1,
"title": "Amazon",
}
}
]
Here is the approach I am currently using:
<label class="item" v-for="(item, i) in allAtivos" :key="item.id">
<input type="checkbox" v-model="myAtivos" :value="item.id" />
</label>
How can I display the allAtivos list with items already checked if they are present in the myAtivos data?