How to pass props to f7-pages in an f7-view through the router with f7-vue2?

Questions
1

The vue instance constructor parameter takes data and render: function(c) { return c('app', { props: { data: this } }); } and router : { page, component }[]. And there’s <f7-view url="/" :main="true"></f7-view> within my app.vue.

But how can I pass props to the various page components in the routes so they’re bound to my data?

Thanks!

2

It is not a recommended way of routing to pass props between pages, even original Vue-Router doesn’t recommend it. At the moment you can pass props by url in router params and router query.

So if you have such route specified in passed routes:

{
  path: /user/:id/,
  component: UserPageComponent,
}

And you load this by /user/25/ url (by clicking on link with such href or by router API) then UserPageComponent will receive prop id: 25, and to make it work this id prop must be specified in component props.

Another way is to pass some data via url query like /user/?id=25. Then in user page it will be accessible via $f7route.query.id

Such approach has limitations, you can’t pass some complex or large data via props, but in many cases it is not needed and should be done in other ways.

Anyway, i can say more if you show me full app example and what data and where you want to pass data props

3 Likes
3

Hmm, well this is what I’m trying to do … I want to make a single-page app that has a complex local state object. The app is essentially an editor for that complex state data and the various pages are the editors for different subtrees of the state. So maybe I have a list of people, each person has details, a list of tasks, and each task includes a reference to the assigned person for that task. The would be routes for /home, /tasks, /task/:id, /people, /person/:id. Each route would have a f7-page associated with it. The home page might show links to /tasks and /people with current counts of each displayed, so the home f7-page component might just get the entire app state. Then the /people page might just need state.people passed to it and /person/:id would either be given the one person record by the router or get the whole list and pick the person by id itself(?). /tasks might also get the whole state because it edits the tasks but also has to list the assigned people and options selector for reassignment.

I’m new to vue, but I don’t think I’d run into too much trouble if I weren’t considering a router dynamically mounting(?) the various pages … I could just pass the relevant state as props to each nested component along with a collection of model methods for AddTask(), UpdatePersonDetail(), etc which would be triggered by dom events and would set the state which vue would detect and re-render. Right?

So I’m thinking that routes[].component could also be a function which takes a state and returns a vue component with props set (somehow - and I’m not sure what a “prepared vue component” is called different from one that hasn’t been given props yet).

Would that be bad?

Thanks!

4

So that is question about state management. Think about how would you do it on website? If you need to go to single person page you usually pass his id in url query, and then you likely will retrieve users data from data base based on query ID.

Same here, as pages props you just pass id or whatever you need to retrieve the data. But how and from where you retrieve it depends on how do you manage state in your app.

The simplest example in Vue is based on storing your Storage data in root component:

//app.js
import Store from 'somewhere';

var app = new Vue({
  ...
  data() {
    return {
      Store,
    };
  }
})

<!-- user-page.vue loaded as /person/:id/ -->
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">{{person.name}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      id: String,
    },
    data() {
      const self = this;
      // Reference to root Store object
      const store = self.$root.Store;
      
      return {
        person: store.people[self.id],
      }
    }
  }
</script>

There are many ways of state management, one of the popular is Vuex https://vuex.vuejs.org/en/intro.html

1 Like
5

Ok, great! Thanks for the example - its good to see the way that was intended so I don’t feel like I’m going in the wrong direction when I get stuck.

6

I might have missed it in the F7-Vue documentation but an additional note about passing " props" as part if the route (like :id in your example) might help. I can imagine that it is difficult to find out on your own or to find this answer if you are unaware of the proper solution.

7

is this what you were lookinfgfor?

http://framework7.io/docs/routes.html#route-path

8

No, I think a note added to the F7-Vue documentation Page topic makes it easier to conclude that the dynamic parts of a path (e.q. /person/:id) can be assigned to the Vue “props”. More precisely: route.params will be stored as component props when props is true.

I am aware that this is a Vue specific feature described here

1 Like