Question

尽管输出正确。我遇到此错误：无法读取未定义的属性“状态”。我怀疑是因为在ajax调用之后添加了列表。我该如何改善呢？

<template v-for="status in showStatus">
    <div class="col-sm-1">{{status}}</div>
</template>

<script>
    var app = new Vue({
        el: "#app",
        data: { 
            listing: []
        },
        created: function(){
            axios.get('/getListing')
            .then(function (response) {
                app.listing = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        computed: {
            showStatus(){
                return this.listing[0].status;
            }
        }
    });
</script>

Answer 1

正如您所猜测的，这是因为listing从一个空数组开始，该数组在以后时间填充。

您的计算属性对此不做任何检查，this.listing[0]将早于undefined。

您只需要在计算出的人口中添加支票

computed: {
  showStatus () {
    return this.listing[0]?.status || []
  }
}

如果您以前没有看过语法，请参见Optional chaining (?.)。

一种替代方法是使用一些安全的默认数据初始化listing

data: () => ({
  listing: [{ status: [] }]
})

VueJS-无法读取未定义的属性“状态”

1 个答案: