Please how do i route from a f7-card or a normal div. it only works when i use f7-list-item but not a f7-card or div

Questions
1

it works
…

<f7-list>
          <f7-list-item link="/allapps/" >Visit Apps</f7-card>
        </f7-list>

not working
…

<f7-card link="/allapps/" >
<f7-card-container  >
Visit Apps
</f7-card-container>
</f7-card>

not working
…
<div link="/allapps/">Visit Apps</div>

it works
…
But the card is positioned relatively and the link tag changes the position
and i don’t want that.

<f7-link href="/allapps/" name="allapps">
<f7-card ="/allapps/" >
<f7-card-container  >
Visit Apps
</f7-card-container>
</f7-card>
</f7-link>

so how do i route on a card or div without the element position not changing?

Please help me.
i am using f7 vue.

2

Please, try this

<f7-card @click="f7router.navigate('/allapps/')">
  <f7-card-container  >
    Visit Apps
  </f7-card-container>
</f7-card>
3

when i tried this solution it didn’t work. this is the error message
Uncaught TypeError: Cannot read properties of undefined (reading ‘navigate’)

4

i am getting this error too.
Uncaught ReferenceError: router is not defined

5

Make sure you have a f7router instance in your component.
Please, read more about router API here

1 Like
6

Thank you very much…
This answer has helped me to get it right.
I am very grateful