2

I am working on a project that uses Laravel Vue SPA, and I got a problem accessing the data of the single product, it's only working when I click once, but when I select again with other product, I can't get the product data, but the URL is correct it's changes the ID but can't access the data.

It is working when I click another link like Services then select product, it can display the product data.

Here is my HTML

<ul >
    <li v-for="product in products">
        <router-link :to="{ name: 'edit-product', params: { id: product.id } }">
            {{ product.title }}
        </router-link>
    </li>
</ul>

My Vue Routes

const EditProduct = require('./components/EditProduct').default;
{ 
    path: '/edit/product/:id', 
    component: EditProduct, 
    name: 'edit-product'
}

my EditProduct component

<template>
    <div>
        <h1>this.$route.params.id</h1>
    </div>
</template>

Cheers

Marky
  • 55
  • 1
  • 2
  • 11

2 Answers2

0

try to define a computed property inside your EditProduct component for get product id

computed: {
  productId(){
    return this.$route.params.id
  }
}

and use productId inside your <h1> tag

<template>
    <div>
        <h1>{{ productId }}</h1>
    </div>
</template>

update

solution :

add this watcher to your EditProduct component for reacting with params change

watch: {
  $route(to) {
    console.log(to.params.id)
    // you can call your method here and pass product id to them for example:  this.getProductDetails(to.params.id)
  },
beforeRouteEnter (to, from, next) {
  next(vm => { 
     //also call your method here =>  vm.getProductDetails(to.params.id)
  });
},

you can read more about params changes here: Reacting to Params Changes

Mohammad Masoudi
  • 426
  • 4
  • 10
  • It says `_vm.productId is not a function` – Marky Apr 10 '21 at 09:08
  • Yes, I was wrong, remove parentheses after `productId` in the template – Mohammad Masoudi Apr 10 '21 at 09:15
  • 1
    Oh, thank you I can get the productId now, but how can I get the product details in `EditProduct` using axios.get, because when I call it on methods: it says `productId is not defined. – Marky Apr 10 '21 at 09:26
  • for access a `computed` property inside your `methods` you should put `this` keyword before it, for example : `this.productId` and then you can access the product id – Mohammad Masoudi Apr 10 '21 at 09:28
  • It's still the same, it only working once, and until I refresh the page or click other links :( – Marky Apr 10 '21 at 09:34
  • It's working but, the first click is not working when I start click other link like `Home`. And also my url is `/edit/product/2444` but when I reload the page. I can't the product details. Thanks – Marky Apr 10 '21 at 16:05
  • i added `beforeRouteEnter` check it out, i think that fix your problem, after reloading page it's called , and when for first time you wanna enter to your component – Mohammad Masoudi Apr 10 '21 at 16:57
0

Look at this answer. You have to watch the productId and execute your logic again.

Possible solution

ColiZei
  • 21
  • 3