我正在尝试创建以下内容:
我收到一个对象数组。每个对象由一个 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>
所以我确实收到了必要的输出,但我不知道如何使组复选框以选择属于它们(属于该组)的复选框的方式工作
我真的很感激任何想法,提前致谢!
最佳答案
- 我建议您在嵌套的对象数组中构建数据(此处计算: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>
关于javascript - vue全选复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60599366/