Changing data with axios and vue when the page change

Question

I'm trying to fetch dynamic data with vue and axios. When I click on a link route, the data must change. This is my example with my 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>

So when I click on a link, the data must change the view dynamically. For example, lets pretend my first link got the id: 1 This is how my target.vue works :

<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>

But when I debugg with Vue extension (chrome), I get my muscleId empty and I've got an error in my console saying : "http://127.0.0.1:8000/user/api/api-platform/muscles/undefined" I don't get why I've got undefined instead my ID. What I did wrong ?

Are you sure that you have muscle.id in the parent component? — David Go
Yes I have it. If I replace {{ $route.params.target }} by {{ $route.params.id }}, the id is print — Micka Bup
hm, thats weird. params are ccessable in created hook for sure — David Go

Micka Bup Micka Bup · Accepted Answer · 2020-11-01T16:59:38

This is my VueRouter's file :

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;

Changing data with axios and vue when the page change

1 Answers