Question

我正在前端使用Nuxt / Vuetify在新应用中构建导航栏。我有一个<v-tabs />循环浏览要显示的链接数组，理想情况下，我希望最后一个链接“购物车”显示一个<v-badge />。最初，我将Cart链接置于循环外部，但随后它没有获得制表符转换，因此它肯定需要位于循环内部。

我尝试根据要设置的项目的属性设置v-if/else以显示徽章，但是这样做根本不显示徽章。这可能吗？

  <template>
    <v-tabs
      class="hidden-sm-and-down"
      optional>

      <v-tab
        v-for="(item, i) in items"
        :key="i"
        :exact="item.title === 'Home'"
        :to="item.to"
        nuxt
        :ripple="false"
        active-class="text--primary"
        class="font-weight-bold nav-link"
        min-width="96"
        text>

        <v-badge                 <-- tried setting v-if/else here
          v-if="item.badge"
          color="red"
          :content="cartItems"
          :value="cartItems"
          overlap>
          {{ item.title }}
        </v-badge>

        <span v-else>{{ item.title }}</span>

      </v-tab>
    </v-tabs>
  </template>

  <script>
    export default {
      data: () => ({
        items: [
          {title: 'Portfolio', to: '/portfolio', badge: false},
          {title: 'About', to: '/about', badge: false},
          {title: 'Contact', to: '/contact', badge: false},
          {title: 'Cart', to: '/cart', badge: true}
        ]
      }),

      computed: {
        cartItems() {
          return 2;
        }        
      }
    }
  </script>

Answer 1

我不确定发生了什么，但是现在已经运行了一个小时。如果其他人遇到类似情况，则以上文章中的代码应该可以工作。

在<v-tabs>循环中包含Vuetify <v-badge />？

1 个答案: