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>

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

Answer 1

你可以尝试类似的东西<label class="item" v-for="(item, i) in allAtivos" :key="item.id">&nbsp; <input type="checkbox" v-model="myAtivos" :value="item.id" :checked="!!myAtivos.find(ativo => ativo.ativo && ativo.ativo.id === item.id)" /></label>