Pass variable to router-link

Ionic Framework Ionic Vue
1

0

I’m trying to pass a variable as the second argument to router-link as below, but it doesn’t work

<ion-item-sliding v-for='(debt, index) in listDebt' :key='debt.id' class="ion-list-padding">
    <ion-item class="myItem">
      <ion-label><b>{{ debt.name }} (RM{{ debt.total }}) {{ debt.id}}</b>
      </ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option router-link="/debtAddEdit/edit/{{ debt.id }}">edit</ion-item-option>
      <ion-item-option color="danger">remove</ion-item-option>
    </ion-item-options>            
</ion-item-sliding>

that is, {{ debt.id }} wasn’t being resolved at all, seems like ionic/vue doesn’t treat it as a variable, instead it was treated as a text.

2

This should work for you.

:router-link="`/debtAddEdit/edit/${debt.id}`"