点击v-checkbox时如何禁止触发v-list-group的展开收起？

解决方案 #

这个问题是点击事件冒泡导致的：v-list-group的activator插槽默认绑定了点击事件用于控制展开/收起，点击内部的v-checkbox时，点击事件会向上冒泡到activator元素，触发展开/收起逻辑，只要阻止事件冒泡即可解决。

方法1：给v-checkbox的click事件添加.stop修饰符（最简方案） #

直接修改checkbox的点击事件写法，.stop是Vue的事件修饰符，专门用来阻止事件向上冒泡：

<v-list>
    <v-list-group>
        <template v-slot:activator>
            <v-list-item-action>
                <!-- 加.stop阻止事件冒泡 -->
                <v-checkbox @click.stop="fn()"/>
            </v-list-item-action>
            <v-list-item-content>
                <v-list-item-title/>
            </v-list-item-content>
        </template>
        ...
    </v-list-group>
</v-list>

修改后点击checkbox只会触发你绑定的fn()方法和checkbox自身的选中状态切换，不会触发v-list-group的展开/收起。

特殊场景补充 #

如果你的项目用的是Vuetify 2.x早期版本，上述写法不生效的话，可以再加.native修饰符，强制绑定原生点击事件：

<v-checkbox @click.native.stop="fn()"/>

内容的提问来源于stack exchange，提问作者Yonier