TypeError：无法读取未定义的属性“标题”

Posted 2023-02-23

【中文标题】TypeError：无法读取未定义的属性“标题”

【英文标题】：TypeError: Cannot read property 'title' of undefined"

【发布时间】：2020-09-12 12:07:20

【问题描述】：

尝试学习一些 Vue.js。 基本上我只是想显示房间的标题。 如您所见，我可以在控制台中看到整个数组，但无法从中打印标题... 有什么想法吗？

GetRooms.vue

<template>
    <div>
    <h1>All rooms</h1>
    <li class="py-2" v-for="room in rooms">
         room.title 
    </li>
    </div>
</template>
<script>
    export default 
        data()
            return 
                rooms:[]
            
        ,
        mounted() 
            this.getAllRooms();
        ,
        methods:
            getAllRooms()
                this.rooms = [];
                this.$http.get('/get-rooms').then(function (response) 
                    this.rooms = response.json();
                 , function (response) 

                )
            
        

    
</script>

【问题讨论】：

你在 Vue Dev Tools 中查看了 rooms 的 data scetion 中的哪些内容？

@Anatoly 我用截图更新了我的帖子，看看。

好吧，看起来您希望 rooms 是一个数组，但它是一个带有未定义 context 属性的对象——因此 Vue 在未定义 @ 上找不到 title 987654333@.

我认为response 是数组，你不必使用response.json 或者你可以使用async/await async getAllRooms() let resp = await this.$http.get('/get-rooms'); this.rooms = resp.data;

非常感谢@jjchiw！那行得通:)

【参考方案1】：

看起来您希望 rooms 成为 array，但它是带有 undefined context 属性的 object - 所以 Vue 无法在 undefined 上找到 title context 当它在 v-for 中迭代 rooms 时。

【参考方案2】：

在 v-for 中使用 :key 也使用 axios 它会将其自动转换为 json，您需要首先调用它自己的数据，然后将其转换为 json 格式。 使用 vue 开发工具更好地理解。 看起来你确实将一个对象调用到一个数组中，尽管这应该仍然有效。你只是得到一个对象数组，它应该向你展示一个对象迭代，所以可能是一个糟糕的 http 调用