Question

我有一个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的正确形式将显示在控制台中，并且没有错误。

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

Answer 1

我会将您的entries设为计算属性，以便在调用时进行更新，看来您的模板未更新计算属性可能会解决此问题。试试这个：

data(){
   return {
      dataEntries: null
    }

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

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

1 个答案: