есть ли способ привязать не HTML теги, такие как v-btn, к тегу Nuxt - PullRequest
Новая
       168

есть ли способ привязать не HTML теги, такие как v-btn, к тегу Nuxt

0 голосов
/ 08 мая 2020

Итак, это код, который я набираю в своем редакторе 

<nuxt-link :to="www.test.com" tag="v-btn" /> Link Button </nuxt-link>

по-видимому, v-btn не является исходным тегом HTML, а является спецификацией vuetify c и когда я пишу код таким образом на самом деле это не работает, и я не получаю стили, привязанные к тегу v-btn. так что мне интересно, есть ли на самом деле способ сделать это ...

ps: обертывание v-btn тегом nuxt-link таким образом ниже 

<nuxt-link to="www.text.com">
     <v-btn>Link Button</v-btn> 
</nuxt-link>

делает кнопку ссылку и на самом деле работает, но это не может использоваться везде, так как некоторые из тегов vuetify связаны друг с другом, и добавление тегов без vuetify внутри них разрушает стили, как в этом примере ниже, который является случаем использования v-btn внутри v-toolbar-item, обычно v-btn имеет специальный стиль внутри v-toolbar-item, но когда мы оборачиваем его nuxt-ссылкой, он теряет все стили. 

      <v-toolbar-items>
      <nuxt-link :to="www.test.com>
        <v-btn>Link Button</v-btn>
      </nuxt-link>
      </v-toolbar-items>

Ответы [ 2 ]

0 голосов
/ 10 мая 2020

Вы можете получить доступ к href="string"

<template>
  <v-col class="pb-0">
    <v-btn
      v-for="(link, i) in links"
      :key="i"
      depressed
      color=""
      text
      rounded
      class="text-none"
      :to="link.l"
      :href="link.href"
    >
      {{ link.n }}
    </v-btn>
  </v-col>
</template>
<script>

export default {
  data () {
    return {
      links: [
        {
          n: 'About us',
          l: '/about-us'
        },
        {
          n: 'Help',
          l: '/help'
        },
        {
          n: 'Blog',
          l: '/blog'
        },
        {
          n: 'Contact',
          l: '/contact'
        },
        {
          n: 'google.com',
          href: 'https://www.google.com'
        }
      ]
    }
  }
}

</script>
0 голосов
/ 09 мая 2020

Компонент v-btn из Vuetify имеет свойство nuxt для обработки Nuxt. js: 

<v-btn nuxt to="www.text.com">Link Button</v-btn>

См. Документацию vuetify о свойстве «nuxt»: https://vuetifyjs.com/en/components/buttons/#api

...