javascript - v-list-item-group 一次选择所有/取消选择所有项目

Question

我想为我的 Vue 应用程序使用 Vuetify 的 v-list-item-group 组件。此列表表示与图形相关的节点。我可以全选、部分或全部选择并删除所选的。

为了更好的用户体验，我想在标题旁边的顶部提供一个“全选/取消全选”复选框。如果仅选择了一些节点，则复选框应呈现不确定状态。

目前这是我正在使用的代码

<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 = [];
          }
        }
    }
})

如果你想玩，我为此创建了一个 codepen

https://codepen.io/magicfoobar/pen/RwPBNmV?editors=1010

所以我遇到的问题是，当我单击标题复选框时，函数 toggleCompleteSelection 被执行了两次，我不知道为什么。

有人知道标题复选框损坏的原因以及如何修复吗？

提前致谢

Answer 1

如果您将复选框触发器从 @click 更改为 @change，它会起作用

<v-checkbox 
:indeterminate="someNodesSelected" 
:input-value="allNodesSelected"  
@change="toggleCompleteSelection" />