Vue.js多个复选框不适用于V模型

问题描述

我有这两种内容类型，它们之间有很多关系。 大小和菜单 现在，在当前情况下，当我尝试编辑尺寸时，已经创建了一个尺寸，并分配了多个菜单。正如您在GIF中所看到的，菜单复选框没有反应，选择了5个菜单，但是当我取消选中一个菜单时，两个菜单都未被选中。我不知道我在这里想念什么。

GIF

输入

<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)
    }
},

谢谢

解决方法

您可以制作一个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>

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

,

如果您的目标是使用对象contentTypes的选定元素的ID动态更新数组menus，则可能需要：

• 如@markcc所建议，将属性checked添加到menus数组的元素中，并通过v-model指令（1）链接此属性
• 添加计算属性contentTypes，该属性将menus数组简化为所选元素ID（2）的数组
• 为了进行开发，请在contentTypes属性上添加观察者以记录其更改（3）

这是伪代码：

<template>
    <div>
        <!-- (1) -->
        <p-check v-for="type in menus" :key="type.id" v-model="type.checked">
            <span>{{type.title}}</span>
        </p-check>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // (1)
            menus: [
                {id: 1,checked: false,title: 'type 1'},{id: 2,title: 'type 2'}
            ]
        }
    },computed: {
        // (2)
        contentTypes() {
            return this.menus.reduce(
                (acc,type) => {
                    if (type.checked) acc.push(type.id)
                    return acc},[]
            )
        }
    },watch: {
        // (3) - in this usecase,only for developement 
        contentTypes(value) {
            console.log(value)      
        }
    }
}
</script>