vue 2 v-for 在用 axios 加载 json 后不工作

Question

我在互联网上搜索了一个解决方案，但到目前为止都没有奏效。 我有一个 Vue 组件，之后我想在其中加载下拉内容。由于它不起作用，我简化了代码，使其只显示元素（即驱动程序名称）。 问题是，v-for 似乎不起作用，因为元素不是在 DOM 中创建的。

代码如下：

<template>

            <div class="list-group">

                <a class="list-group-item" v-for="driver in drivers">
                    {{driver.name}}
                </a>

            </div>

</template>

<script>
export default {
    name: "DriverComponent",
    data: function (){
        return {
            drivers: [],
        }
    },
    mounted(){
        this.loadDrivers();
        console.log(this.drivers);
    },
    methods: {

        loadDrivers: function(){
            axios.get('/api/drivers')
                .then(
                    (response) => {
                        this.drivers = response.data.data;
                        console.log(this.drivers);
                    }

                )
                .catch(function(error){
                    console.log(error);
                });
            // console.log(this.drivers);
        }
    }
}
</script>

在我的 app.js 中：

require('./bootstrap');

window.Vue = require('vue').default;
Vue.component('driver-component', require('./components/DriverComponent.vue').default);
const drivers = new Vue({
    el: '#driv',
});

我的 html 如下所示：

    <div id="driv">
        <driver-component></driver-component>
    </div>

如您所见，我添加了一些日志，如下所示： Image of console output

有趣的是，它应该是同一个数组，但第一个数组是空的，但第二个数组中有正确的值。-> 编辑：澄清，谢谢

为了突出问题：我希望有一个类似的列表： v-for created list 相反，我得到一个空白页。 如果我用我在 json 中获得的数据初始化 drivers 数组，它就可以工作。但是，由于我之后加载数据，它似乎不起作用

感谢您的帮助！ BR 约翰内斯

编辑： 我正在使用"axios": "^0.21"，控制器是：

    public function index(){
        return DriverResource::collection(Drivers::all());
    }

此控制器在data 字段中返回数组，因此，我设置了response.data.data（意思是两次data） 后端返回：

{"data":[{"id":1,"name":"UPS"},{"id":2,"name":"Hermes"}]}

Answer 1

查看axios 的主页。在“响应模式”section 下，它们提供响应的外观。专门针对 data，它是

{
  // `data` is the response that was provided by the server
  data: {}

  < ... omitted for brevity ... >
}

请再次检查您的后端返回或应该返回的内容。记录你得到的全部回复。 this.drivers = response.data.data; 似乎不正确，但 this.drivers = response.data; 应该可以工作。

---

您没有说明您正在使用哪个版本的axios 或显示您的配置，所以我使用以下示例：
axios = ^0.21.1
vue-axios = @ 987654332@

将“名称”替换为“标题”以匹配以下响应格式：

 {
    "title": "delectus aut autem",

      < ... omitted for brevity ... >
  },

--

loadDrivers: function(){
  Vue.axios.get('https://jsonplaceholder.typicode.com/todos')
      .then(
          (response) => {
            this.drivers = response.data; // <<-- works and many task titles are shown on page
            // this.drivers = response.data.data; // <<-- DOES NOT WORK LIKE FOR YOU, blank page
            console.log(this.drivers);
          }
      )
      .catch(function(error){
        console.log(error);
      });
  // console.log(this.drivers);
}