TypeError：使用 Vuesax 表在 VueJS 中传播不可迭代实例的尝试无效答案

【问题标题】：TypeError: Invalid attempt to spread non-iterable instance in VueJS using Vuesax tableTypeError：使用 Vuesax 表在 VueJS 中传播不可迭代实例的尝试无效
【发布时间】：2020-08-10 20:34:25
【问题描述】：

我开始学习 vue js，目前正在实现一个基本的 crud 应用程序。我成功地在表中显示了 1 条记录，但是当记录数为 2 或更多时出现问题。

我使用 vuesax 服务端表来渲染数据，这是我的模板代码

 <vs-table
                        v-model="selected"
                        pagination
                        max-items="10"
                        search
                        :data="examiner">
                        <template slot="header">
                            <div class="d-flex align-items-center justify-content-between w-100 add-account">
                                <h3>
                                    Examiner List
                                </h3>
                            </div>
                        </template>

                        <template slot="thead">
                            <vs-th sort-key="email">
                                Fullname
                            </vs-th>
                            <vs-th sort-key="Username">
                                Address
                            </vs-th>
                            <vs-th sort-key="User Role">
                                Email
                            </vs-th>
                            <vs-th sort-key="action">
                                Action
                            </vs-th>
                        </template>

                        <template slot-scope="{data}">
                            <vs-tr :data="row" :key="indextr" v-for="(row, indextr) in data" >
                                <vs-td :data="data[indextr].firstname">
                                    {{ data[indextr].firstname }} {{ data[indextr].lastname }}
                                </vs-td>

                                <vs-td :data="data[indextr].address">
                                    {{ data[indextr].address }}
                                </vs-td>

                                <vs-td :data="data[indextr].email">
                                    {{data[indextr].email}}
                                </vs-td>

                                <vs-td>
                                    <div class="d-flex">

                                        <vs-button class="mr-1" color="primary" data-placement="top" data-toggle="tooltip"
                                                   title="Edit Examiner"
                                                   @click="editUser(row)"
                                                   vs-type="border" size="small" icon="edit"/>

                                        <vs-button class="mr-1" color="danger" data-placement="top" data-toggle="tooltip"
                                                   title="Delete Examiner"
                                                   vs-type="border" size="small" icon="delete"/>

                                    </div>
                                </vs-td>
                            </vs-tr>
                        </template>
                    </vs-table>

这是我的脚本代码

<script>
    import axios from "../../axios";

    export default {
        name: "examiner",

        data() {
            return {
                host: window.location.host,
                edit: false,
                examiner: [],
                selected: []
            }
        },

        mounted() {
            this.fetchUsers()
            console.log(this.examiner)
        },
        methods: {
            fetchUsers() {
                axios.get('../api/getExaminer')
                    .then(response => {
                        this.examiner = response.data
                    })
                    .catch(error => console.log(error))
            },

            editUser(row) {
                this.edit = true;
                console.log(row)
            }
        }
    }
</script>

目前，每当我尝试加载数据时，都会收到此错误

【问题讨论】：

标签： vue.js

【解决方案1】：

我刚遇到这个问题。看来，如果 :data 属性为 null 或不可迭代，它将显示此错误。

在我的例子中，data 属性在某个时候变成了null。对你来说，我建议如下：

首先，为 data prop 使用一个计算值，该值返回一个空数组，以防出现错误。
确保您的 response.data 确实是一个数组或可迭代对象

【讨论】：