Vue axios（和获取）响应未传递到数据属性答案

【问题标题】：Vue axios (and fetch) responses not passing into data propertyVue axios（和获取）响应未传递到数据属性
【发布时间】：2018-12-05 19:04:47
【问题描述】：

我有一个 Vue (2.2.1) 组件，它应该通过向 Laravel API 发出请求来显示会员目录。请求成功，当我 console.log 时响应是正确的。同样，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 run dev 之后），将显示代表 entries（一个空数组）的初始状态的空括号，而不是原始 JSON 数据。（我现在只是在测试，还没有设计或构建表格）。但是，如果我添加 console.log(this.entries) 或 console.log(response) 或 console.log(response.data)，则 JSON 的正确形式会显示在控制台中，并且不会出现错误。

我已将 axios 代码替换为适当的 fetch 代码，包括 ->json() 行并获得相同的结果。我还使用了“实践”API (JSONPlaceholder) 来确保我的 API 没有问题，并且同样得到了相同的结果。这表明我在我的 Vue 组件 <script> 中做错了什么，但是在搜索 SO、Google 和 Vue.js 论坛数小时后，我什么也没找到。不幸的是，最接近的匹配链接 (Vue.js cannot set data returned from external axios response) 没有帮助。

【问题讨论】：

{{ entries }} 对 JSON 数组有何期望？使用正确的v-for正确显示json数组。
@JoshuaStephen Vue 将JSON.stringify 数组和对象放在{{ }} 中。
你有一个语法错误，你没有正确关闭<div>和<template>标签。
您提供的代码有效。 See this fiddle。还有一些我们不知道的事情正在发生。你能提供一个MCVE吗？
在初始化 Vue 之前声明组件并且它可以工作：jsfiddle.net/dv0qjas1（否则您将收到“未知自定义元素：”错误）。

标签： api vue.js axios fetch-api

【解决方案1】：

我会将您的 entries 设为计算属性，以便在调用时更新，您的模板似乎没有更新计算属性可能会解决此问题。试试这个：

data(){
   return {
      dataEntries: null
    }

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

【讨论】：