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

Posted 2023-02-27

【中文标题】Vue axios（和获取）响应未传递到数据属性

【英文标题】：Vue axios (and fetch) responses not passing into data property

【发布时间】：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（否则您将收到“未知自定义元素：”错误）。

【参考方案1】：

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

data()
   return 
      dataEntries: null
    

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