页面变化时用 axios 和 vue 改变数据

Posted 2023-03-14

【中文标题】页面变化时用 axios 和 vue 改变数据

【英文标题】：Changing data with axios and vue when the page change

【发布时间】：2021-02-14 01:19:10

【问题描述】：

我正在尝试使用 vue 和 axios 获取动态数据。当我单击链接路径时，数据必须更改。这是我的 TheUpperOrLower.vue 示例：

<template>
<div>
    <h2> title </h2>
    <p 
      v-for="muscle in muscles"
      :key="muscle.id"
    >
   <router-link
   v-if="muscle.upperOrLower === upOrLow"
   :to="
     name: 'target',
     params: slug: user, target: muscle.target, id: muscle.id
   "
   >
     muscle.target 
   </router-link>
    </p>
</div>

所以当我点击一个链接时，数据必须动态地改变视图。例如，假设我的第一个链接得到了 id: 1 这就是我的 target.vue 的工作方式：

<template>
 <div id="data-muscle">
  <h1> $route.params.target </h1>
 </div>
</template>
<script>
 import axios from "axios";
 export default 
  data() 
   return 
    excercices: ,
    loading: false,
    muscleId: 
  ;
,
created() 
  this.getMuscleData();
,
methods: 
    async getMuscleData() 
      this.loading = true;
      let response = await axios.get('api/api-platform/muscles/' + this.$route.params.id)
      this.loading = false;
      this.muscleId = response.data;
  ,
 
;
</script>

但是，当我使用 Vue 扩展程序（chrome）进行调试时，我的肌肉 ID 为空，并且我的控制台中出现错误消息：“http://127.0.0.1:8000/user/api/api-platform/肌肉/未定义” 我不明白为什么我的 ID 是未定义的。我做错了什么？

【问题讨论】：

你确定你的父组件中有muscle.id？

是的，我有。如果我将 $route.params.target 替换为 $route.params.id ，则 id 为 print

嗯，这很奇怪。参数肯定可以在创建的钩子中访问

你也可以分享你的 vue-router 文件吗？

【参考方案1】：

这是我的 VueRouter 的文件：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
 path: '/:slug/:target', 
  name:"target",
  component: () =>
    import(/*webpackChunkName: "target"*/"../view/TheTarget")

]

 const router = new VueRouter(
routes,
mode: "history",
);

export default router;

【讨论】：

有什么帮助吗？