2

我正在做一个使用 Laravel Vue SPA 的项目，我在访问单个产品的数据时遇到问题，只有单击一次才能工作，但是当我再次选择其他产品时，我无法获取产品数据，但 URL 是正确的，它更改了 ID 但无法访问数据。

当我单击另一个链接（例如Services然后选择产品）时它正在工作，它可以显示产品数据。

这是我的 HTML

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

我的 Vue 路线

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

我的 EditProduct 组件

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

干杯

4

2 回答 2

0

看看这个答案。您必须查看 productId 并再次执行您的逻辑。

可能的解决方案

于 2021-04-10T10:26:36.447 回答
0

尝试在EditProduct组件内定义一个计算属性以获取产品 ID

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

并productId在您的<h1>标签内使用

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

更新

solution :

将此观察程序添加到您的EditProduct组件以对参数更改做出反应

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)
  });
},

您可以在此处阅读有关参数更改的更多信息：对参数更改做出反应

于 2021-04-10T08:43:55.897 回答