vue.jsvuetify.jsvue-slotv-btn

Vuetify v-btn how to remove follow up slot span tag


I'm trying to remove the span tag which follow up in the v-btn component provided by Vuetify, that is getting in the way of tracking via HTML id attributes in analytics

Code provided below using UI component (v-btn) from Vuetify

<v-btn
   id="btn-home-sectionSix-partner"
   to="/about/partnership"
   class="ma-2 HomeLastBtn textBtn text-center"
   outlined
   style="text-align: -webkit-center;"
 >Become a partner
</v-btn>

Renders the following in browser

<a data-v-fae5bece="" 
 href="/about/partnership" 
 class="ma-2 HomeLastBtn textBtn text-center v-btn v-btn--outlined v-btn--router theme--light v-size--default" 
 id="btn-home-sectionSix-partner" 
 style="text-align: -webkit-center;"
>
 <span class="v-btn__content">
   Become a partner
 </span>
</a>

As mentioned above, I do not want the text in the span tag, but in the a tag directly

<a data-v-fae5bece="" 
 href="/about/partnership" 
 class="ma-2 HomeLastBtn textBtn text-center v-btn v-btn--outlined v-btn--router theme--light v-size--default" 
 id="btn-home-sectionSix-partner" 
 style="text-align: -webkit-center;"
 >
  Become a partner
</a>

I have referred to the following sources but not getting the answer I want.

Have also tried the following

<a data-v-fae5bece="" 
  href="/about/partnership" 
  class="ma-2 HomeLastBtn textBtn text-center v-btn v-btn--outlined v-btn--router theme--light v-size--default" 
  id="btn-home-sectionSix-partner" 
  style="text-align: -webkit-center;"
>
 <template v-slot:default>
   Try For Free Now
 </template>
</a>

But leads to the same result above.

Thanks & appreciate all the help I can get.


Solution

  • The V-Btn component have a genContent function implementation which will be invoked to generate the child elements while rendering the root component. By default it provides the following implementation.

    genContent (): VNode {
      return this.$createElement('span', {
        staticClass: 'v-btn__content',
      }, this.$slots.default)
    }
    

    As you can see it creates a span element with a static class v-btn__content .That's why the text is rendered with in the span tag.

    So to answer your question, you might have to extend the V-btn component and provide your own implementation of genContent function. The official doc provides a sample example(codepen) on how to extend the componet and override the genContent(which is copied below)

    // src/components/ActivateBtn
    import { VBtn } from 'vuetify/lib'
    
    export default {
      extends: VBtn,
    
      methods: {
        // Here we overwrite the genContent method of VBtn
        // to override the default genContent method
        genContent() {
          return this.$createElement('div', {
            staticClass: 'v-btn__contents'
          }, [
            'Activate ',
            this.$slots.default
          ])
        }
      }
    }