[Vuejs]-Vue Router – Populate details view with json from home view

by

1👍

✅

I hope you are using axios or some ajax to fetch data, if so, try doing this:

data() {
  return {
    myPost: {}
  }
}
mounted() {
  const base = 'http://jsonplaceholder.typicode.com';

  axios.get(`${base}/posts/${this.$route.params.id}`).then(resp => {
    console.log(resp.data);
    this.myPost = resp.data;
  });
}

If you don’t want to do another axios call and use the data this already fetched then pass full detail object in param like this params: { post: post }, check this code:

<router-link :to="{ name: 'details', params: { id: post.id, post: post }}"> {{ post.title }}</router-link>

then get the data in this way $route.params.post.YOUR-KEY:

<template>
  <p> The post id is: {{ $route.params.post.id }} </p>
  <p> The post title is: {{ $route.params.post.title }} </p>
</template>
👤Syed

0👍

Try looping the <router-link> directly like this

<router-link v-for="post in posts" :key="post.id" class="post-item" tag="li" :to="{name:'details',params:{id:post.id}}">
  {{ post.title }}
</router-link>
👤Rijosh

Leave a comment