[Vuejs]-How to bind slot with v-bind for url attribute?

by

0👍

✅

I think you want to put the text “Your Profile” in <slot></slot>

So, for this, you need to do this.

<navigation-link url="/profile">
   <template slot="text">
      Your Profile
   </template>
</navigation-link>

And in the component, name the slot like this

<template>
  <div>
    <a
      v-bind:href="url"
      class="nav-link">
      <slot name="text" />
    </a>
    <span class="active></span>
  <div>
</template>

Probably, this work.

EDIT:

according to docs this should work, but instead I get error: Property or method “url” is not defined on the instance but referenced during render.

That is because, you are not declaring url in the component, you probably need to put 

props: ['url'],
data() {
 return {
    propUrl: this.url
  }
}

and in the template use this.propUrl

Regards

Leave a comment