Question

我正在尝试将我的API响应对象呈现到表行中。端点没有问题。我可以毫无问题地获取数据。数据已分页。我可以看到数组对象的内容（通过使用双花括号）。但是v-for方向不会有任何影响。

我尝试了一些修复方法。其中之一是使用response.data.data来处理它，但是没有用。我也尝试遍历customers.data，但是得到了相同的结果。

这部分来自我的组件

import axios from 'axios'

export default {
    data () {
        return {
            customers: [],
        }
    },

    mounted: function() {
        axios.get('http://127.0.0.1:8000/customer/all').then(res => {

            this.customers.push(res.data);

        });
    },

这是指令部分：

 <tr v-for="customer in customers">
     <td>
         <input class="uk-checkbox" type="checkbox">
     </td>
     <td>{{ customer.mail }}</td>
     <td>
        {{ customer.telephone }}
     </td>
     <td>
         <ul class="uk-iconnav">
            <li><span class="uk-icon" uk-icon="icon: check"></span></li>
            <li><span class="uk-icon" uk-toggle="target: #user-request" uk-icon="icon: question"></span></li>
            <li><span class="uk-icon" uk-icon="icon: trash"></span></li>

         </ul>
      </td>
  </tr>
  {{ customers }} => this is OK

客户json输出

[ { "current_page": 1, "data": [ { "id": 1, "user_info": "test", "password": "test", "gsm": "123123213", "telephone": 124, "mail": "test@test", "address": "test", "created_at": null, "updated_at": null } ], "from": 1, "last_page": 1, "next_page_url": null, "path": "http://127.0.0.1:8000/customer/all", "per_page": 4, "prev_page_url": null, "to": 1, "total": 1 } ]

应该渲染，但是不渲染。我没有收到任何控制台错误。问题是什么？还是谢谢。

Answer 1

在您的代码段中，res.data是一个数组，其中包含一个对象，该对象带有一个data属性，该属性具有有价值的要显示的客户数据。

要将检索到的客户数据值存储在组件的customers数组中，可以spread进行如下操作：

mounted: function() {
   axios.get('http://127.0.0.1:8000/customer/all').then(res => {
      this.customers.push(...res.data[0].data);
   });
}

如果customers数组没有其他修改源，您甚至可以执行以下操作：

mounted: function() {
   axios.get('http://127.0.0.1:8000/customer/all').then(res => {
      this.customers = res.data[0].data;
   });
}

VueJS：尽管对象位于数组中，v-for指令仍不呈现项目

1 个答案: