Search code examples
vue.jsionic-frameworkvuejs3ionic4

Using prop data for router-link in vue

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