V-for list item and a dynamic URL | Framework7 Vue

Questions
1

This should be simple.

I’m just iterating over an array, and need to access the item data to build the URL.

This is what I have tried with no success:

<f7-list-item v-for="(stop, index) in $root.stops" :title="stop.name" link="/stop/{{index}}/" :data-id="index"></f7-list-item>

<f7-list-item v-for="(stop, index) in $root.stops" :title="stop.name" :link="/stop/index/" :data-id="index"></f7-list-item>

<f7-list-item v-for="(stop, index) in $root.stops" :title="stop.name" :link="/stop/stop.id/" :data-id="index"></f7-list-item>

<f7-list-item v-for="(stop, index) in $root.stops" :title="stop.name" link="/stop/{{stop.id}}/" :data-id="index"></f7-list-item>

What am I doing wrong? Any help would greatly be appreciated. Thanks! :slight_smile:

2

None is right :slight_smile: In Vue it should be like:

:link="`/stop/${index}/`"
1 Like
3

Or

:link="'/stop/' + index + '/'"
1 Like
4

I was close!!! :stuck_out_tongue_winking_eye:

As always, THANK YOU!!!

1 Like