时间戳

首页 > 解决方案 > Vuejs多个复选框不适用于v-model

javascript - Vuejs多个复选框不适用于v-model

问题描述

我有这两种具有多对多关系的内容类型。尺寸和菜单 现在在当前情况下，我创建了一个尺寸，分配了多个菜单，当我尝试编辑尺寸时。正如您在 GIF 中看到的那样，菜单复选框不是反应式的，选择了 5 个菜单，但是当我取消选中一个菜单时，两个菜单未选中。我不知道我在这里错过了什么。

动图 在此处输入图像描述

输入

<label v-for="(type,i) in menus" :key="i">
   <p-check color="danger" name="ctype" class="p-default text-sm" v-model="contentTypes" :value="type.id">
        <span class="text-base capitalize font-medium">{{type.title}}</span>
   </p-check>
</label>

计算方法

contentTypes: {
    get: function () {
       return this.editingTable.data.menus.map(e => e.id)
    },
    set: function (value) {
       console.log(value)
    }
},

谢谢

标签： javascriptvue.jsv-forv-model

解决方案

您可以制作一个 jsFiddle 并与我们分享此链接吗？我不确定您为什么要使用 Computed 来处理您的情况，如果对我来说，我只需在您的菜单对象中添加一个参数（isChecked）。

<label v-for="(type,i) in menus" :key="i">
   <p-check color="danger" name="ctype" class="p-default text-sm" v-model="type.isChecked" :value="type.id">
        <span class="text-base capitalize font-medium">{{type.title}}</span>
   </p-check>
</label>

或者也许您正在使用支持组复选框的复选框包？

推荐阅读