Pass json data from one component to an other. Vue.js

Question

I'm trying all day to figure out how to pass data from one component to another. I have read a lot of relevant tutorials and instructions, unfortunately with out luck.

I have fetched some data from an api and i present them in the home.vue and i want to pass the data into a new file to generate a page that will show a random product from the list.

Maybe the approach is totally wrong, but it is the first time that i use vue components, i have experience just with the instance

I'm trying to implement it using props to return the data to the new page.

Here is the randomize.vue file where I would like to pass my data

 <template> <div class="hello"> <p> {{ this.propsdata[0].e }} </p> <h1>dla;dl;djal;d</h1> </div> </template> <script> export default { name: "randomize", props: ["propsdata"], data() { return { obj: this.propsdata }; }, mounted(){ console.log(this.props); }, }; </script> 

This is the home.vue file that i fetch the data

 <template> <div> <div class=" main-conte" > <randomize :propsData=toBeShown /> <transition-group name="fade" tag="div" id="container" class=" row " > <figure v-for="(value,index) in toBeShownOrdered" id="page-wrap" :key="index" class="beer-container col-xs-6 col-sm-6 col-lg-4 col-xl-2" > <a > <img @click="goTodetail(value.id)" class="logo lazy img-responsive loaded" v-bind:src="getMissingImg(index)"/> <figcaption> <div class="beer-title">{{value.name}}</div> <div class="beer-availability"> {{value.tagline}}</div> <div class="learn-more"> <h4 class="beer-info-title">Format</h4> <span class="serving-icons"></span> <div class="serving"> <i v-if="value.abv >= 0 && value.abv <=6 " class="fas fa-wine-glass-alt"></i> <i v-if="value.abv >= 6 && value.abv <=7" class="fas fa-glass-cheers"></i> <i v-if="value.abv >= 7 && value.abv <=100" class="fas fa-wine-bottle"></i> <span class="measure">{{value.abv}}</span>%</div> </div> </figcaption> </a> </figure> </transition-group> <div class=prev-next> <button @click="orderByName = !orderByName">Click Me!</button> <button class="prev" @click="prevPage" :disabled="currentPage==1"> <i class="fas fa-angle-double-left"></i></button> <button class="next" @click="nextPage" :disabled="currentPage == totalPages"> <i class="fas fa-angle-double-right"></i> </button> </div> </div> <div> </div> </div> </template> <script> import { mdbView, mdbMask } from "mdbvue"; import FadeTransition from "./fade-transition.vue"; import randomize from "@/components/randomize"; export default { name: "home", components: { mdbView, mdbMask, FadeTransition, randomize }, data() { return { items: [], message: '', currentPage: 1, orderByName: false, }; }, computed: { //show more less products toBeShown() { return this.items.slice(0, this.currentPage * 5); }, totalPages() { return Math.ceil( this.items.length / 4); }, toBeShownOrdered() { return this.orderByName ? _.orderBy(this.toBeShown, 'name', 'asc') : this.toBeShown; } }, mounted() { this.fetchData(); }, methods: { fetchData: function() { const myRequest = new Request("https://api.punkapi.com/v2/beers"); fetch(myRequest) .then(response => { return response.json(); }) .then(data => { this.items = data; console.log(this.items); }) .catch(error => { console.log(error); }); }, getMissingImg(index) { return this.images[index]; }, nextPage(){ if(this.currentPage < this.totalPages) this.currentPage++; }, prevPage(){ this.currentPage = this.currentPage - 1 || 1; }, goTodetail(prodId) { let proId=prodId this.$router.push({name:'blog',params:{Pid:proId}}) }, 

index.js

 import Vue from 'vue' import Router from 'vue-router' import home from '@/components/home' import blog from '@/components/blog' import randomize from '@/components/randomize' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: home, props:true }, { path: '/blog/:Pid', name: 'blog', component: blog, props:true }, { path: '/randomize/', name: 'randomize', component: randomize, props:true }, ] }) 

Answer 1

You would benefit from using vuex as it will keep your state at the application level (as opposed to component data which keeps each component state at the component level).

Setting up vuex requires a bit more work and has a learning curve, but unless you won't grow your app to a medium/large size it will in the long term benefit you by decreasing the overall complexity of your app.

In short, all components from your app can access the state stored in vuex without having to deal with props. And from any component, you can dispatch actions implemented in your vuex store to alter the vuex state. Vuex will help keeping your components focused on presenting data and capturing user actions.

To ease setting up a Vue app with vue-router and vuex, you could choose to build your app with nuxt.js which is a framework that provides you with vue+vue-router+vuex with no effort. Nuxt.js will also help setting up server side rendering which would be beneficial to SEO if your app is to be indexed by search engines.