Vue axios (и fetch) ответы не переходят в свойство data - PullRequest
Новая
       31

Vue axios (и fetch) ответы не переходят в свойство data

0 голосов
/ 27 июня 2018

У меня есть компонент Vue (2.2.1), который должен отображать каталог членства, отправляя запрос в API Laravel. Запрос успешно выполняется, и ответ правильный, когда я его утешаю. Аналогично, запрос API успешно выполняется в Postman, и объект JSON правильно отформатирован. Но ответ не будет передаваться в переменную в объекте данных экземпляра Vue, которому я пытаюсь его назначить. Мой код: 

<template>
  <div>
    {{ entries }}
  </div>
</template>

<script>
  export default {
    name: 'directory',
    data() {
      return {
        entries: []
      }
    },
    created() {
      this.getEntries()
    },
    methods: {
      getEntries: function() {
        axios.get('/api/directory')
          .then(response => {
             this.entries = response.data;
          });
      }
    }
  }
</script>

Когда я загружаю страницу (после npm, запускаю dev), отображаются пустые скобки, представляющие начальное состояние entries (пустой массив), а не необработанные данные JSON. (Я просто сейчас тестирую, пока не разрабатываю и не создаю таблицу). Однако, если я добавлю console.log(this.entries) или console.log(response) или console.log(response.data), правильная форма JSON отобразится в консоли, и ошибок не будет.

Я заменил код аксиоса на соответствующий код извлечения, включая строку ->json(), и получил те же результаты. Я также использовал «практический» API (JSONPlaceholder), чтобы убедиться, что это не проблема с моим API, и также получил те же результаты. Это говорит о том, что я что-то не так делаю в своем компоненте Vue <script>, но после нескольких часов поиска по SO, Google и форуму Vue.js я ничего не нашел. К сожалению, самая близкая совпадающая ссылка ( Vue.js не может установить данные, возвращаемые из ответа внешней оси ), не помогла.

1 Ответ

0 голосов
/ 26 мая 2019

Я бы сделал ваше entries вычисляемым свойством, чтобы оно обновлялось при вызове, похоже, ваш шаблон не обновляет вычисляемое свойство, может решить эту проблему. Попробуйте это: 

data(){
   return {
      dataEntries: null
    }

computed: {
   entries(){
       if (dataEntries) return dataEntries
       return []
    }
...