首页 > 解决方案 > v-list-group 中的附加按钮

问题描述

我想建立 v-list-group 它将有额外的按钮。但这些按钮不应激活/停用组列表。我做了例子:

<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>
              <v-btn icon>
                <v-icon>mdi-plus</v-icon> <!-- This button should not activate list -->
              </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>

https://codepen.io/mmasztalerczuk/pen/VwPGXjv

按下加号按钮时,不应激活/停用组列表。

标签: javascriptvue.jsvueify

解决方案


推荐阅读