Как извлечь и отобразить одну запись с помощью Vue и Axios - PullRequest
Новая
       28

Как извлечь и отобразить одну запись с помощью Vue и Axios

0 голосов
/ 22 декабря 2018

У меня есть базовый CRUD rails 5.2 API с моделью Story.Я строю интерфейс Vuejs, чтобы потреблять его.В настоящее время индексное представление в / Stories успешно извлекает данные с сервера.Я также могу добавить истории в базу данных с помощью NewStory.vue в историях / новых.Сейчас я пытаюсь показать одну историю на странице в историях /: id.На данный момент сервер api показывает единственный нужный мне результат в v1 / Stories /: id.

. Вот что я имею в сервисах / Api.js: 

import axios from 'axios'

export default() => {
  return axios.create({
    baseURL: `http://localhost:3000/v1`
  })
}

в StoriesService.js:

import Api from '@/services/Api'

export default {
  fetchStories () {
    return Api().get('stories')
  },

  addStory (params) {
    return Api().post('stories', params)
  },

  getStory (params) {
    return Api().get('/stories/1')
  }
}

в ViewStory.vue: 

<template>
  <div class="stories">
    <h1>Story</h1>
    <div v-if="story" class="table-wrap">
      <div>
        <router-link v-bind:to="{ name: 'NewStory' }" class="">Add 
Story</router-link>
      </div>
      <p>Title: {{story.attributes.title}}</p>
      <p>Overview: {{story.attributes.description}}</p>
    </div>
    <div v-else>
       The story with id:{{params}} does not exist <br><br>
       <!-- <router-link v-bind:to="{ name: 'NewStory' }" 
class="add_story_link">Add Story</router-link> -->
    </div>
  </div>
</template>

<script>
import StoriesService from '@/services/StoriesService'
export default {
  name: 'story',
  data () {
    return {
      title: '',
      description: ''
    }
  },
  mounted () {
    this.getStory()
  },
  methods: {
    async getStory (params) {
      const response = await StoriesService.getStory(params)
      this.story = response.data
      console.log(this.story)
    }
  }
}

</script>

Когда код записи жестко задан, на вкладке Сеть отображается запрос к API и правильная запись.будучи извлеченным.

enter image description here

Однако, если я изменяю вызов getStory на return Api().get('/stories/', params), я получаю ответ 304 и не могу получить данные.

enter image description here

Мой вопрос заключается в том, как заставить StoriesService.js вернуть localhost: 3000 / v1 / Stories / params.id, где params.id является идентификаторомистория, указанная в ссылке.

1 Ответ

0 голосов
/ 22 декабря 2018

В настоящее время вы не передаете никаких параметров в getStory, поэтому вам нужно получить их от this.$route.params

async getStory () {
  const response = await StoriesService.getStory(this.$route.params)
  this.story = response.data
  console.log(this.story)
}

Кроме того, что axios поддерживает только параметры строки запроса, поэтому, если ваш URL выглядит как/ Stories / someId, то вам нужно создать его самостоятельно в getStory: 

getStory (params) {
   return Api().get(`/stories/${params.id}`)
}

Кроме того, в вашем объекте данных отсутствует свойство story: 

data () {
  return {
    story: null,
    title: '',
    description: ''
  }
},
...