选择所有复选框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: [

  {

    name: "sport",

    options: [

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

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

    ]

  },

  {

    name:"food"

    options: [...]

  }

]

跟踪选定的选项以及选定的组。

为选定的组做一个观察者......如果它们发生变化，则相应地更改选定的选项：

export default {

  name: "groupedOptionsComponent",

  data() {

    return {

      selectedOptions: [],

      selectedGroups: [],

      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"]

    };

  },

  computed: {

    nestedOptions() {

      return this.optionsGroupsList.map(groupName => ({

        name: groupName,

        options: this.optionsList.filter(({ group }) => group === groupName)

      }));

    }

  },

  watch: {

    selectedGroups: function(groups) {

      this.optionsList.forEach(option => {

        if (

          groups.includes(option.group) &&

          !this.selectedOptions.includes(option.id)

        ) {

          this.selectedOptions.push(option.id);

        } else {

          this.selectedOptions = this.optionsList

            .filter(({ group }) => groups.includes(group))

            .map(({ id }) => id);

        }

      });

    }

  }

};

使您的模板看起来像这样：

<template>

  <div>

    <div v-for="(group, index) in nestedOptions" class="checkbox-group" :key="index">

      <vs-checkbox :vs-value="group.name" v-model="selectedGroups">{{ group.name }}</vs-checkbox>

      <vs-checkbox

        v-for="option in group.options"

        :vs-value="option.id"

        :key="option.id"

        v-model="selectedOptions"

      >{{ option.text }}</vs-checkbox>

    </div>

  </div>

</template>