How make json data available for my Vue dynamic routes

Question

I have a List component where I fetch my date from db/blogs.json:

created() {
    fetch(\'http://localhost:3000/blogs\')
    .then(respo         


        

Answer 1

You can send props to the child component in the tag name, in your case:

  //LIST component(PARENT)
  <tamplate>
    <BlogDetail :blogs="blogs"></BlogDetail> //CHILD component
  </template>

Answer 2

Here is the working sandbox.

Firstly you need to import JSON data from your JSON file correctly. As:

<script>
import ListItem from "./ListItem";
import Blogs from "../../public/db/blogs.json";

export default {
  name: "List",
  components: {
    ListItem
  },
  data() {
    return {
      blogs: Blogs.experiences
    };
  },
  created() {}
};
</script>

Have to send props in the router-link as :

<router-link 
  :to="{ name: 'BlogDetails', params: { id: blog.id,blog:blog }}">More information
</router-link>