Question

我开始学习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>

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

Answer 1

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

就我而言，data 道具在某个时候变成了 null。对于您，我建议如下：

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

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

1 个答案: