Using prop data for router-link in vue

Issue

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?

Solution

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

Answered By - Lawrence Cherone