CODEWITHSUNDEEP
vue.jsnuxt.js
Max
Max

Reputation: 934

NUXT pass object data into pages with path

I'm really new to Vue and Nuxt so I apologise if this is a simple question.

I'm generating my routes dynamically on making an API call for my data on Index.vue. One API call is enough for me to retrieve all the data i need which is stored in deals_array, so I don't need another API call on my individual page, I just need the data from each deal in deals_array.

<ul>
  <li v-for="deal of deals_array" :key="deal.id">
    <nuxt-link :to="getSlug(deal)">{{ deal.name }}, {{deal.value}}</nuxt-link>
  </li>
</ul>

I'm wondering how do I pass the entire deal object into my pages, so that when I click on the individual nuxt-link I would be able to access that deal object and all its attributes (for each page).

I've taken a look at passing params into nuxt-link but I understand that it only pairs with name attribute and not the path, where I need the path URL in this case.

I may be doing this entirely wrong so I'm hoping to be pointed in the right direction.

Edit - getSlug function

getSlug(deal) {
      let name = deal.name;
      let dealDetails = deal.details;
      let name_hyphen = name.replace(/\s+/g, "-");
      let deal_hyphen = dealDetails.replace(/\s+/g, "-");
      let nameDealSlug = name_hyphen + "-" + deal_hyphen;
      // remove selected special characters from slug
      let clean_nameDealSlug = nameDealSlug.replace(
        /[&\/\\#,+()$~%.'":*?<>{}]/g,
        ""
      );

      let finalSlug = `deals/${clean_nameDealSlug}`;
      return finalSlug;
    }

Upvotes: 0

Views: 5962

Answers (1)

Helper
Helper

Reputation: 847

I'm assuming you have gone through this: https://router.vuejs.org/api/.

You can just pass the entire object:

<nuxt-link :to="{ path: 'test', query: {a: 1, b: 2}}">Test Page</nuxt-link>

And your URL will become something like this:

http://localhost:3000/test?a=1&b=2

The entire object can be simply passed.

This will be available to your next page in $route object in the url query.

Otherwise if you don't want to get your deal object exposed just use the concepts of vuex. Store the entire deal object in the vuex and pass ids to different pages. And from pages retrieve the deal object through vuex.

Upvotes: 3

Related Questions