F7-list-item with a dynamic link (framework7/vue

Questions
1

this is for a list-item inside a list-group

I’m using f7-list-item with a v-for, but I need the link to be something different depending on a value - how can I set a dynamic link?

I’ve tried using a function with parameters (ie, dynamicNav(Value1, Value2) - with no luck, as I lose the link attributes on the list item.

using a v-for with a v-if causes duplicate data as both f7-list-items run together

2

Can you please show some code examples?

3

For example - this doesn’t work, but basically I’m looking for an if/else on the v-bind:link depending on a value in the item row:

<f7-list class="my-list">
<f7-list-group v-for="(myitems, key) in this.myitemsgrouped">


<f7-list-item v-bind:title="key" group-title></f7-list-item>

<f7-list-item v-if="item.children > 0" v-bind:link="`/child-link/${item.id}/`" v-bind:header="item.name" v-for="item in myitems"></f7-list-item>
<f7-list-item v-else="item.children == 0" v-bind:link="`/no-child-link/${item.id}/`" v-bind:header="item.name" v-for="item in myitems"></f7-list-item>


</f7-list-group>
</f7-list>
4 
v-bind:link="item.children > 0  ? `/child-link/${item.id}/` :  `/no-child-link/${item.id}/`"
1 Like