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>

选择所有复选框

1 个答案: