【发布时间】：2020-06-30 19:03:30
【问题描述】：
我想为我的 Vue 应用使用 Vuetify 的 v-list-item-group 组件。此列表表示与图相关的节点。我可以不选择任何、部分或全部，然后删除选定的。
为了更好的用户体验，我想在标题旁边的顶部提供一个“全选/取消全选”复选框。如果只选择了一些节点，复选框应该呈现 indeterminate 状态。
目前这是我正在使用的代码
<div id="app">
<v-app id="inspire">
<v-list>
<v-list-item>
<v-list-item-action>
<v-checkbox :indeterminate="someNodesSelected" :input-value="allNodesSelected" @click="toggleCompleteSelection" />
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="graphWithNodes.name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn icon :disabled="noNodesSelected" @click="deleteNodes">
<v-icon color="error">mdi-delete</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
<v-list-item-group v-model="selectedNodeIds" multiple>
<v-list-item v-for="node in graphWithNodes.nodes" :key="node.id" :value="node.id">
<template v-slot:default="{ active, toggle }">
<v-list-item-action>
<v-checkbox :input-value="active" :true-value="node.id" @click="toggle" />
</v-list-item-action>
<v-list-item-content>
<v-list-item-subtitle v-text="node.id"></v-list-item-subtitle>
</v-list-item-content>
</template>
</v-list-item>
</v-list-item-group>
</v-list>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
selectedNodeIds: [],
graphWithNodes: {
id: 1,
name: "The graph",
nodes: [{
id: 1,
graphId: 1
}, {
id: 2,
graphId: 1
}]
},
}
},
computed: {
noNodesSelected() {
return this.selectedNodeIds.length === 0;
},
someNodesSelected() {
return this.selectedNodeIds.length > 0 && !this.allNodesSelected;
},
allNodesSelected() {
return (
this.selectedNodeIds.length === this.graphWithNodes.nodes.length
);
}
},
methods: {
deleteNodes(nodeIds) {
for (const nodeId of this.selectedNodeIds) {
this.deleteNode(nodeId);
}
this.selectedQueueIds = [];
},
deleteNode(id) {
this.graphWithNodes.nodes = this.graphWithNodes.nodes.filter(node => node.id !== id);
},
toggleCompleteSelection() {
if(this.noNodesSelected || this.someNodesSelected) {
this.selectedNodeIds = this.graphWithNodes.nodes.map(node => node.id);
} else {
this.selectedNodeIds = [];
}
}
}
})
如果你想玩，我为此创建了一个代码笔
https://codepen.io/magicfoobar/pen/RwPBNmV?editors=1010
所以我遇到的问题是，当我单击标题复选框时，函数 toggleCompleteSelection 会执行两次，我不知道为什么。
有人知道为什么标题复选框坏了以及如何修复它吗？
提前致谢
【问题讨论】：
标签： javascript vue.js vuetify.js