Vuetify 列表组使父级可点击

Question

有没有一种方法可以让父级（在课程的情况下）可以单击，而不切换 on/off 下面的课程项目，并且只有向右的箭头 show/hide 子项目。目前，如果它有路径，我刚刚将路由器 link 添加到列表中的父项。

      <v-list-group
        v-if="item.children"
        v-model="item.active"
        :key="item.title"
        :prepend-icon="item.icon"
         style="border-top: solid; border-color: #004d3d; border-width: thin;"
      >
        <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title class="text">
                <router-link v-if="item.path" :to="item.path">{{ item.text }}</router-link>
                <span v-else>{{ item.text }}</span>
              </v-list-item-title>
            </v-list-item-content>
        </template>

        <template v-for="child in item.children">
          <v-list-item
            :key="child.title"
            :to="child.path"
            v-if="$store.getters['session/hasPermissionKey'](child.permissionKey)"
          >
            <v-list-item-action>
              <v-icon>{{ child.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title class="text">
                {{ child.title }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-list-group>

Answer 1

是的。我实际上最近对扩展面板做了类似的事情。

我需要做的是让扩展面板 header 可以点击，同时只使用图标扩展面板。

为此，我绑定了 @click.stop="myMethod 而不是 @click

.stop修饰符防止组件的点击事件冒泡。

这不要与用于防止默认浏览器行为（如表单提交或重新加载）发生的 .prevent 修饰符混淆。

您仍然需要将激活器绑定到图标本身，或者图标上的 @click.stop 方法来切换打开和关闭 children。

Vuetify 列表组使父级可点击

Vutify list group make parent clickable

vue.js

vuetify.js