Passing object from List item to another page

[suman]

Hi all,
I am very new to quasar and Vue.js. I am learning. My requirement is like display set of important information through list or cards. For more details, click Details link on each card which should go to next page with more details.
I am able to fetch JSON from an external source and able to display some info in list. But I am unable to figure out, how I would pass clicked object to next page for details view ?. Can someone please help me. I have created two components. One for display list of key information and another is for details view.

Thanks for you help

[eleina]

Maybe you can try it with dynamic route matching: https://router.vuejs.org/en/essentials/dynamic-matching.html
With this you can pass the object to the router and retrieve it on the other page.

[suman]

Hi,
Thanks elina, I will try. I was thinking to pass object using props. But I am not able to figure out how I would I send. In dynamic routing, While I can pass some parameter, is it possible to pass the whole object so that, in next page, I don’t need to fetch data again as I already fetched same.

[rstoenescu]

Also use Vuex for state management and communication between components.

[suman]

Hi rstoenescu,

Thanks for the reply. Do you have any demo/source code from where I can learn this concept?. It will be a great help. I am sorry, I am very new to vue.js and learning bit.

[benoitranque]

Hello Suman
Are you getting your data from a database?
If your data is an array of objects, and each has an id, place said id in the query when navigating to your detailed view. Then in your detailed view’s nounted function, check if an id is provided, and query the database for that object. You could also use state managment using vuex, bit more conplicated and does not scale as well/makes components more dependent on one another. Please note this is more a vue/vue-router issue than a quasar isue. Cheers!

Edit: example

// in list
<div v-for="item in items">
    {{item.name}}
    <router-link :to="`/details?item_id=${item._id}`">show me details</router-link>
</div>
// in detail
export default {
    ...
    mounted: function () {
        if (this.$route.query.item_id) {
        // query your database for item_id here
        }
    }
}

[suman]

Hi benoitranque,

Thanks for your example. I learned. I was able to fetch this way. But in this way, I had to make two API calls. I was thinking If I can make one call initially to fetch all data and show some info in the first component and some details info in root components. SO I was thinking if I can pass the whole object to details component from list components. SO clicking on the list of the objects would pass the whole object again to details component. Is there any way to achieve or am I thinking completely wrong way?

[benoitranque]

While you can do it the way you propose, this requires state managment. So Vuex. Not a bad thing, however your list and detail view become linked in some way. I only showed an alternative way to do it wich maximizes view independence from one another at the cost of another backend call.

Edit:
Not sure if you can/should pass the whole object as part of the query?

[suman]

@benoitranque and @rstoenescu

Thanks a lot for your clarification and help.