vuejs-当列表B中存在项目时，检查列表A中标记的循环

Question

我正在循环一个包含所有可用项目和复选框的列表，以便用户可以选择他想要的项目。

allAtivos数据示例：

"allAtivos": [
{ "id": 1, "title": "Amazon" },
{ "id": 2, "title": "Google" },
]

因此，我的困难在于，我需要比较另一个数据结构，以了解哪些项目已经被选中。

用户的myAtivos数据示例(注意Ativo项是子对象(：

"myAtivos": [
{
"ativo": {
"id": 1,
"title": "Amazon",
}
}
]

这就是我想要做的：

<label class="item" v-for="(item, i) in allAtivos" :key="item.id">
<input type="checkbox" v-model="myAtivos" :value="item.id" />
</label>

当myAtivos中存在已检查项目的allAtivos列表时，如何显示该列表？

Answer 1

您可以尝试使用类似的东西

<label class="item" v-for="(item, i) in allAtivos" :key="item.id">
<input type="checkbox" v-model="myAtivos" :value="item.id" :checked="!!myAtivos.find(ativo => ativo.ativo && ativo.ativo.id === item.id)" />
</label>