Vue.js VueJS：多个数组，在任何一个数组中选择时删除其他数组中的值

尝试获取主阵列和3个单独的v型复选框。选择第一个数组中的值后，请将其从其他两个数组中删除，或仅禁用它，以便无法为多个数组选择相同的值。如果他们在数组#3中选择了某个对象，则在#1和#2中该对象将被禁用

我的存储阵列：

state: {
    dscpData: [
        { id: 'cs0', value: 'CS0' },
        { id: 'cs1', value: 'CS1' },
        { id: 'cs2', value: 'CS2' },
        { id: 'cs3', value: 'CS3' },
        { id: 'cs4', value: 'CS4' },
        { id: 'cs5', value: 'CS5' },
        { id: 'cs6', value: 'CS6' },
        { id: 'cs7', value: 'CS7' },
        { id: 'af11', value: 'AF11' },
        { id: 'af12', value: 'AF12' },
        { id: 'af13', value: 'AF13' },
        { id: 'af21', value: 'AF21' },
        { id: 'af22', value: 'AF22' },
        { id: 'af23', value: 'AF23' },
        { id: 'af31', value: 'AF31' },
        { id: 'af32', value: 'AF32' },
        { id: 'af33', value: 'AF33' },
        { id: 'af41', value: 'AF41' },
        { id: 'af42', value: 'AF42' },
        { id: 'af43', value: 'AF43' },
        { id: 'ef', value: 'EF' }
    ]
}

---

我非常感谢所有人的帮助，我已经好几天没做任何事情了

对于v-for和您的密钥，最好使用option.id。当前，您将把Bool推到您的数组，而不是复选框的id。为了检查您的字段是否已被选中，您需要某种标志，您可以在dscpData项中添加另一个道具，或者创建另一个具有选中ID的数组，并与原始数组进行比较，以查看所选内容

另一件事是从同一数组创建3个列表。它们的id将是相同的，所以您的输入id和属性标签将变得疯狂

请检查此工作示例，虽然不理想，但会给出一个想法：）：

const dscpChoiceQ1 = ref([]);
const dscpChoiceQ2 = ref([]);
const dscpChoiceQ3 = ref([]);
const dscpValuesQ1 = computed({
    get: () => {
        const v = dscpChoiceQ1.value;
        return v.join(' ');
    },
    set: (newval) => {
        dscpChoiceQ1.value = newval;
    }
});
const dscpValuesQ2 = computed({
    get: () => {
        const v = dscpChoiceQ2.value;
        return v.join(' ');
    },
    set: (newval) => {
        dscpChoiceQ2.value = newval;
    }
});
const dscpValuesQ3 = computed({
    get: () => {
        const v = dscpChoiceQ3.value;
        return v.join(' ');
    },
    set: (newval) => {
        dscpChoiceQ3.value = newval;
    }
});

state: {
    dscpData: [
        { id: 'cs0', value: 'CS0' },
        { id: 'cs1', value: 'CS1' },
        { id: 'cs2', value: 'CS2' },
        { id: 'cs3', value: 'CS3' },
        { id: 'cs4', value: 'CS4' },
        { id: 'cs5', value: 'CS5' },
        { id: 'cs6', value: 'CS6' },
        { id: 'cs7', value: 'CS7' },
        { id: 'af11', value: 'AF11' },
        { id: 'af12', value: 'AF12' },
        { id: 'af13', value: 'AF13' },
        { id: 'af21', value: 'AF21' },
        { id: 'af22', value: 'AF22' },
        { id: 'af23', value: 'AF23' },
        { id: 'af31', value: 'AF31' },
        { id: 'af32', value: 'AF32' },
        { id: 'af33', value: 'AF33' },
        { id: 'af41', value: 'AF41' },
        { id: 'af42', value: 'AF42' },
        { id: 'af43', value: 'AF43' },
        { id: 'ef', value: 'EF' }
    ]
}