Маршрутизатор Vue - просмотр сведений с помощью json на главном экране - PullRequest
Новая
       4

Маршрутизатор Vue - просмотр сведений с помощью json на главном экране

0 голосов
/ 03 апреля 2020

В моем приложении Vue у меня есть домашний вид, просматривая сообщения из API 

http://jsonplaceholder.typicode.com/posts/

Использование Ax ios - это мой index.js файл 

import axios from 'axios'

export default {
  fetchPosts () {
    return axios
      .get('http://jsonplaceholder.typicode.com/posts/')
      .then(response => response.data)
  }
}

Мой Настройка постов в режиме домашнего просмотра со ссылкой на маршрутизатор, генерирующей представление подробностей из json идентификатора поста 

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

сценарий My Home 

<script>
export default {
  name: 'home',
  data () {
    return {
      loading: false
    }
  },

  computed: {
    posts () {
      return this.$store.state.posts
    }
  },

  created () {
    this.loading = true
    this.$store.dispatch('fetchPosts')
      .then(posts => {
        this.loading = false
      })
  }
}
</script>

Ссылка на маршрутизатор правильно генерирует представление сведений на основе на идентификаторе json, поэтому сообщение 1 создает страницу с именем /details/1, так как мой текущий маршрутизатор настроен 

  const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      props: true
    },
    {
      path: '/details/:id',
      name: 'details',
      component: () => import(/* webpackChunkName: "details" */ './views/Details.vue'),
      props: true
    }
  ]
})

export default router

Внутри моего просмотра данных /views/Details.vue У меня 

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

который корректно извлекает json из моего домашнего просмотра The detail is: 1

Как мне получить заголовок сообщения, тело и c в подробном представлении из домашнего просмотра?

Пожалуйста, дайте я знаю, если мне нужно предоставить любой другой код, спасибо.

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Я надеюсь, что вы используете axios или некоторые ajax для извлечения данных, если это так, попробуйте сделать следующее: 

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;
  });
}

Если вы не хотите делать еще один axios вызов и используйте данные, которые уже были извлечены, затем передайте объект полной детализации в параметре, например, params: { post: post }, проверьте этот код: 

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

, затем получите данные таким образом $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>
0 голосов
/ 03 апреля 2020

Попробуйте зациклить <router-link> прямо так 

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