选择所有复选框vue

Question

我正在尝试创建以下内容：

我收到一组对象。每个对象由一个 id、一个选项和一个组名组成。我需要以一种方式输出数据，首先我有一个带有组名称属性值的复选框，然后是具有相同组属性的复选框列表。例如，假设我收到以下数据：

[

{id:1, text: 'Football', group: 'sport'}

{id:2, text: 'Basketball', group: 'sport'}

{id:3, text: 'Cookie', group: 'food'}

{id:4, text: 'Soup', group: 'food'}

]

所以输出应该如下：

<checkbox which when clicked should select all checkboxes belonging to this group>Sport</checkbox>

<checkbox>Football</checkbox>

<checkbox>Basketball</checkbox>

<checkbox which when clicked should select all checkboxes belonging to this group>Food</checkbox>

<checkbox>Cookie</checkbox>

<checkbox>Soup</checkbox>

到目前为止，我有以下内容：

export default {

        data() {

            return {

                actionTypes: actionTypes,

                relationTypes: relationTypes,

                optionsList: [

                              {id:1, text: 'Football', group: 'sport'}

                              {id:2, text: 'Basketball', group: 'sport'}

                              {id:3, text: 'Cookie', group: 'food'}

                              {id:4, text: 'Soup', group: 'food'}

                              ]

                optionsGroupsList: ['Sport', 'Food'],

                localValue: []

        },

<link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div

        v-for="group in optionsGroupsList"

        class="checkbox-group">

        <vs-checkbox

          :vs-value="group"

          :key="group"

        >

          {{ group }}

        </vs-checkbox>

        <vs-checkbox

          v-for="option in optionsList"

          v-if="option.group === group"

          :vs-value="option.id"

          :key="option.id"

          v-model="localValue"

        >

          {{ option.text }}

        </vs-checkbox>

      </div>

所以我确实收到了必要的输出，但我不知道如何使组复选框以选择属于它们的复选框的方式工作（属于该组）

我真的很感激任何想法，在此先感谢！

Answer 1

我建议您将数据构建在嵌套的对象数组中（此处计算：nestedOptions -method），以便您的数据如下所示：nestedOptions: [&nbsp; {&nbsp; &nbsp; name: "sport",&nbsp; &nbsp; options: [&nbsp; &nbsp; &nbsp; { id: 1, text: "Football", group: "sport" },&nbsp; &nbsp; &nbsp; { id: 2, text: "Basketball", group: "sport" },&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; name:"food"&nbsp; &nbsp; options: [...]&nbsp; }]跟踪选定的选项以及选定的组。为选定的组做一个观察者......如果它们发生变化，则相应地更改选定的选项：export default {&nbsp; name: "groupedOptionsComponent",&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; selectedOptions: [],&nbsp; &nbsp; &nbsp; selectedGroups: [],&nbsp; &nbsp; &nbsp; optionsList: [&nbsp; &nbsp; &nbsp; &nbsp; { id: 1, text: "Football", group: "sport" },&nbsp; &nbsp; &nbsp; &nbsp; { id: 2, text: "Basketball", group: "sport" },&nbsp; &nbsp; &nbsp; &nbsp; { id: 3, text: "Cookie", group: "food" },&nbsp; &nbsp; &nbsp; &nbsp; { id: 4, text: "Soup", group: "food" }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; optionsGroupsList: ["sport", "food"]&nbsp; &nbsp; };&nbsp; },&nbsp; computed: {&nbsp; &nbsp; nestedOptions() {&nbsp; &nbsp; &nbsp; return this.optionsGroupsList.map(groupName => ({&nbsp; &nbsp; &nbsp; &nbsp; name: groupName,&nbsp; &nbsp; &nbsp; &nbsp; options: this.optionsList.filter(({ group }) => group === groupName)&nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; }&nbsp; },&nbsp; watch: {&nbsp; &nbsp; selectedGroups: function(groups) {&nbsp; &nbsp; &nbsp; this.optionsList.forEach(option => {&nbsp; &nbsp; &nbsp; &nbsp; if (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; groups.includes(option.group) &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; !this.selectedOptions.includes(option.id)&nbsp; &nbsp; &nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.selectedOptions.push(option.id);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.selectedOptions = this.optionsList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .filter(({ group }) => groups.includes(group))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .map(({ id }) => id);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }};使您的模板看起来像这样：<template>&nbsp; <div>&nbsp; &nbsp; <div v-for="(group, index) in nestedOptions" class="checkbox-group" :key="index">&nbsp; &nbsp; &nbsp; <vs-checkbox :vs-value="group.name" v-model="selectedGroups">{{ group.name }}</vs-checkbox>&nbsp; &nbsp; &nbsp; <vs-checkbox&nbsp; &nbsp; &nbsp; &nbsp; v-for="option in group.options"&nbsp; &nbsp; &nbsp; &nbsp; :vs-value="option.id"&nbsp; &nbsp; &nbsp; &nbsp; :key="option.id"&nbsp; &nbsp; &nbsp; &nbsp; v-model="selectedOptions"&nbsp; &nbsp; &nbsp; >{{ option.text }}</vs-checkbox>&nbsp; &nbsp; </div>&nbsp; </div></template>