I'm making an app using VueJS and Framework7, and I'm having trouble understanding how to apply dynamic route matching to my app.
My app has two pages, main view and info page. On the main page, there is a list of links that all lead to the info page. However, the links are generated from API data, and I wish to do the same on the info page. What I'm trying to do is pass the id parameter from the API data into the link address, so that it's stored in there even while I load the same info page template. Using that id, I'd like to identify which data to print on the info page from the API data.
Here is my link element:
<f7-list-item v-for="lowerBoss in lowerBosses" :key="lowerBoss.id" :data="lowerBoss" class="single-boss subheading white" link="/boss/lowerBoss.id" onclick="console.log(lowerBoss)">
{{ lowerBoss.name }}
</f7-list-item>
So here I am trying to pass the id from the lowerBoss object into the link address and key. I tried to console.log the object as well, but whenever I click on this link, I get an error saying lowerBoss is not defined.
I am aware that I should most likely be using router-link for this, but I had trouble getting that to work - the links would not work wherever they led. Besides that, I had the same issue with them too.
The answer above is right. You have to remmeber, that every property that written as usual <component link="some-link/object.id"></component> will not be parsed, but will be passed as string. So you have to use :link="'/bla/bla/'+object.id".
lowerBoss will be available inside f7 component as "data", because of :data="lowerBoss" this part of your tag.
Check this Vue.js Passing Static or Dynamic Props
To handle events you have to use vue.js directives Event handling