在v-list-group中添加不触发分组展开/收起的额外按钮

这个问题很常见——当你在v-list-group的activator插槽里添加自定义按钮时，按钮的点击事件会冒泡到父级的list item，从而触发分组的展开/收起操作。咱们只需要阻止按钮的点击事件冒泡就能解决这个问题。

具体做法是给你的加号按钮添加@click.stop事件修饰符，它会阻止事件向上传递到父元素，这样点击按钮就只会执行你想要的逻辑，不会影响分组的展开状态。

修改后的完整代码如下：

<div id="app">
  <v-app id="inspire">
    <v-card class="mx-auto" width="300" >
      <v-list>
        <v-list-group :value="true" prepend-icon="mdi-account-circle" >
          <template v-slot:activator>
            <v-list-item-title>Users</v-list-item-title>
            <v-list-item-action>
              <!-- 添加@click.stop阻止事件冒泡 -->
              <v-btn icon @click.stop>
                <v-icon>mdi-plus</v-icon>
              </v-btn>
            </v-list-item-action>
          </template>
          <v-list-group :value="true" no-action sub-group >
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>Admin</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item v-for="([title, icon], i) in admins" :key="i" link >
              <v-list-item-title v-text="title"></v-list-item-title>
              <v-list-item-icon>
                <v-icon v-text="icon"></v-icon>
              </v-list-item-icon>
            </v-list-item>
          </v-list-group>
        </v-list-group>
      </v-list>
    </v-card>
  </v-app>
</div>

简单解释下原理：

• Vuetify的v-list-group activator插槽内的元素都属于v-list-item的可点击区域，点击会触发分组的toggle方法。
• @click.stop是Vue的事件修饰符，作用是阻止事件冒泡到父级DOM元素，这样按钮的点击事件就不会被父级的list item捕获，也就不会触发分组的展开/收起了。

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