Using prop data for router-link in vue-CodePudding

I am trying to create a component that will dynamically change links on ion buttons based on passed in props.

I have

<template>
<ion-button router-link :to "`$/  {{subLink1}}" shape="round">{{linkName1}}</ion-button>
</template>

<script>
import{IonButton} from '@ionic/vue'
export default{
props:{subLink1:{required:true},linkName1:{required:true}}
}
</script>

props passed in from parent are e.g. subLink1: "sale", linkName1: "Sales"

However console is returning blank with what I have that passed in, so I imagine the issue lies somewhere in my router-link?

CodePudding user response：

Set the href property;

<template>
    <ion-button :href="`/${subLink1}`" shape="round">{{linkName1}}</ion-button>
</template>

<script>
import { IonButton } from '@ionic/vue'
export default{
    props: {
        subLink1:{
            required: true
        },
        linkName1: {
            required: true
        }
    }
}
</script>

CodePudding user response：

Do it like:

<ion-button 
   :router-link="`/${subLink1}`" 
   router-direction="forward" 
   shape="round" 
   v-text="linkName1"
/>

RTM: https://ionicframework.com/docs/vue/navigation#navigating-using-router-link