Vuetify 列表组使父级可点击

Question

有没有办法让家长在课程可点击的情况下，无需打开/关闭下面的课程项目，并且只有右侧的箭头显示/隐藏子项目。目前我刚刚添加了一个路由器链接到列表中的父项（如果它有路径）。

      <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

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

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

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

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

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

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