How to access data inside an object in all Components in Vue

Question

I am new to Vue and got stuck with this thing. I want to Access data which is stored inside an Object in one of my components. I was trying to make a cart system for practice and hard coded data for few games to access it in the app. My code for the Object is below

products: [
                { 
                    id: 1, 
                    name: 'Call of Duty: Modern Warfare',
                    price: 'Rs. 5,500',
                    shortDesc: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    description: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    inStock: 'yes',
                    availableQuantity: '100',
                    img: 'src/assets/img/codmw.jpg',
                },
                { 
                    id: 2, 
                    name: 'PlayerUnknowns Battlegrounds',
                    price: 'Rs. 600',
                    shortDesc: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    description: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    inStock: 'yes',
                    availableQuantity: '500',
                    img: 'src/assets/img/pubg.jpg',
                },
                { 
                    id: 3, 
                    name: 'GTA VI',
                    price: 'Rs. 10,000',
                    shortDesc: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    description: 'Call of Duty: MW returns. This game is a complete revamp of the old COD:MW',
                    inStock: 'yes',
                    availableQuantity: '5',
                    img: 'src/assets/img/gta.jpg',
                }
            ]

The above data stays in the Shop.vue component and whenever the user clicks on "View Product" button, a seperate route for that particular Product gets called and I want to fetch the data of the particular game in that route. For that, I made a Button in Shop.vue itself as below

<router-link 
    class="btn btn-primary" 
    :to="/view/ + game.id" 
    v-b-tooltip.hover title="View Product details">
    View Product
</router-link>

Now the button opens up a new route that goes to "view/ID" where ID is dynamic. I Access that dynamic ID in my view route with

this.$route.params.id

But now I need to know that how can I access the data where product ID is the dynamic ID above inside the ViewProduct.vue compoenent because the Product Object was in Shop.vue component?

Please help me with this

If you want share data between components use vuex, then you have access everywhere — Mohsen
– Mohsen, Commented May 7, 2020 at 14:16

healthy_meerkat · Accepted Answer · 2020-05-07 15:39:04Z

2

Vuex would solve this for you. You can also pass props between components like this:

const router = new VueRouter({
  routes: [
    { path: '/view/ + game.id', component: ViewProduct.vue, props: { id:this.id } }
  ]
})

In the ViewProduct component:

export default {
        data() {
            return {

                },
            };
        },
        props: ['id'],     <===== *props*
        computed: {

        },
        methods: {
        },

You can access the props then from inside the ViewProduct component:

this.$props.id

edited May 7, 2020 at 15:39

answered May 7, 2020 at 15:30

healthy_meerkat

1322 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Radu Diță · Accepted Answer · 2020-05-07 14:19:27Z

0

Your best bet would be to use a global state for this.

The simplest way is to use Vuex.

You would set your products as the state and add a getter using method style access to get your product based on an id.

answered May 7, 2020 at 14:19

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to access data inside an object in all Components in Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related