【问题标题】:Switch between child Component having same path using v-breadcrumbs使用 v-breadcrumbs 在具有相同路径的子组件之间切换
【发布时间】:2020-11-11 18:32:09
【问题描述】:

我有一个主要组件,其中导入了其他小组件。如何使用 v-breadcrumbs(vuetify) 在这些小组件之间切换???

【问题讨论】:

  • 请分享一些可重现的代码

标签: javascript vue.js vuetify.js


【解决方案1】:

由于面包屑在语义上应该会影响您的路径,因此您可能应该使用 tabs (v-tabs) 来完成您需要的操作。

Here's a good example.


一般:

<template>
    <v-tabs
      v-model="tab"
      background-color="transparent"
      color="basil"
      grow
    >
      <v-tab
        v-for="item in items"
        :key="item"
      >
        {{ item }}
      </v-tab>
    </v-tabs>

    <v-tabs-items v-model="tab">
      <v-tab-item
        v-for="item in items"
        :key="item"
      >
        <v-card
          color="basil"
          flat
        >
          <v-card-text>{{ text }}</v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
</template>

<script>
  export default {
    data () {
      return {
        tab: null,
        items: [
          'Appetizers', 'Entrees', 'Deserts', 'Cocktails',
        ],
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
      }
    },
  }
</script>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-01-16
    • 2018-10-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-07
    • 2021-09-12
    • 2021-01-04
    相关资源
    最近更新 更多