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

【问题标题】：TypeError: Cannot read property 'title' of undefined"TypeError：无法读取未定义的属性“标题”
【发布时间】：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！那行得通:)

标签： laravel vue.js vuejs2 vue-component vue-resource

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：