vue.js - 方法不能迭代数组属性

Question

我的应用通过 axios 从 api 读取 json 数据数组。 我将数组存储在应用程序属性中。一切都很好，我可以检查并查看数组数据。

当一个方法应该遍历数组时，它会给出一个错误消息：

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of null"

这是我的应用程序中的代码：

"use strict";

const app = new Vue({
    el: '#app',
    data: {
        diskstatus: null,
    },
    methods: {
        hasServer: function (serverName) {
            for (let i = 0; i < this.diskstatus.length; i++) {
                if (this.diskstatus[i].ServerName == serverName) {
                    return 'Y';
                }
            }
            return 'N';
        }
    },
    mounted() {
        axios
            .get('api/diskstatus')
            .then(response => {
                this.diskstatus = response.data.rows;
            })
            .catch(err => {
                console.log(err)
            });
    }
});

知道为什么方法中的代码没有将属性视为数组吗？

我可以 console.log 数组，它看起来很完美。 提前感谢您的反馈！

Answer 1

显然，v-for 无法对 null 进行操作，因为 null 不是可迭代。

如果您尝试在最初为 null 的属性上使用 v-for，但后来异步变为 Array，您有两种选择：

1. 初始化diskstatus: [] 而不是null
2. 在您尝试v-for 的元素上，添加保护：v-if="diskstatus"。