Vue Composition API + Router Popup component params?

Questions
1

Hello,

How do you get the router params, when using composition API?
using F7 vue 8.3.0

Example route:

 {
    path: '/product/:id/',
    popup: {
      component: ProductPage
    }
  },
  {
    path: '/product/',
    popup: {
      component: ProductEditPage
    }
  }

Then on one of my pages i have a list of items, that I want to open in popup mode:

<f7-list
      media-list
      class="search-list searchbar-found"
    >
      <f7-list-item v-for="item in ItemsList"
        :key="item"
        :title="item.name"
        :link="`/product/${item.id}/`"
      >

By the way the href does nothing, really needs to use the ā€œlinkā€ prop only that works why?

But then when the popup opensā€¦ the route context is not there.

<template>
   <f7-popup>
   <f7-view init>
  <f7-page>
     {{ product }}
  </f7-page>
</f7-view>
 </f7-popup>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { f7, useStore } from 'framework7-vue'

const props = defineProps(['f7route', 'f7router'])
const products = useStore('products').
const product=ref();

 onMounted(() => {
//get product if passed on the router id props.f7router.params.id 
 product.value=products.find(item=>item.id==props.f7router.params.id);
});

Any idea how to do it? Thanks

2

Hey Miguel,
instead to use f7routeR (ending R) try f7route so:

props.f7route.params
props.f7route.params.id

It should work as expected! :+1:

3

Humā€¦ no it does not work! Iā€™m using composition API, makes a difference?

image

4

Ok, found a solution.

Does not make much sense, but using the array notation to declare the prop does not work, as it comes undefined!

const props = defineProps([ā€˜f7routeā€™])

However, using the object notation, it does! Finally!

const props = defineProps({f7route: Object})

1 Like