VueJS-选中复选框是否在数据数组中

Question

我正在创建一个访问控制列表，用户可以在其中查看所有权限。我有一个下拉菜单，您可以在其中选择用户角色。这会将与该角色关联的所有权限都放入permissions数组中。我想获取此数据，然后如果值在数组中，则填充复选框。我可以使用for循环来执行此操作，但是权限不存在。

    <div class="container">
      <div class="row">
        <div class="col-sm">
          <input
            type="checkbox"
            name="delete-media"
            id="delete-media"
            value="Delete Media"
            :checked="permissions.includes('delete_media')"
            v-model="rolePermissions"
          />
          <label for="add-user">Add User</label>
        </div>
      </div>
    </div>

示例响应

["add_client","edit_client","delete_client"]

Answer 1

删除value属性v-model本质上是value + @change，如果您最初在permissions变量上设置了绑定值，则应该获取初始值值。 您可能需要使用:checked道具才能将初始值设置为选中或不选中，只要使计算属性返回一个true就可以了，如果有一个初始值具有permissions作为依存关系。