Как сделать json данные доступными для моих Vue динамических c маршрутов - PullRequest
Новая
       69

Как сделать json данные доступными для моих Vue динамических c маршрутов

0 голосов
/ 20 июня 2020

У меня есть компонент List, из которого я беру дату из db/blogs.json: 

created() {
    fetch('http://localhost:3000/blogs')
    .then(response => {
      return response.json();
    })
    .then(data => {
      this.blogs = data;
    })
  },

В моем BlogDetail.vue у меня есть: 

<script>
export default {
  data: () => {
    return {  
      blogId:this.$route.params.id
    }
  },
  computed: {
    blog() {
      return this.blogs.find(
        blog => blog.id === this.blogId
      )
    }
  }
}
</script>

Но как мне получить данные blogs в этом компоненте, которые я получил в компоненте List?

Потому что теперь в разделе <template> моего BlogDetail.vue я не могу получить доступ, например, к {{blog.name}}

Обновление:

Я пытаюсь передать blogs с реквизитами:

Теперь я принимаю опору в BlogDetails.vue: 

props: {
    blogs: {
      type: Array
    }
  },

Но откуда (какой компонент) я должен зарегистрировать опору, например :blogs="blogs"?

Обновление 2 :

Это то, что у меня есть пока ссылка на песочницу

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Вы можете отправлять реквизиты дочернему компоненту в имени тега, в вашем случае: 

  //LIST component(PARENT)
  <tamplate>
    <BlogDetail :blogs="blogs"></BlogDetail> //CHILD component
  </template>
0 голосов
/ 20 июня 2020

Здесь - рабочая песочница.

Во-первых, вам нужно правильно импортировать данные JSON из вашего JSON файла. Как: 

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

Необходимо отправлять реквизиты в маршрутизаторе-ссылке как: 

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