TypeError：无法读取未定义的属性'title'”

Question

试图学习一些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>

Answer 1

[您似乎希望rooms是array，但它是带有object undefined道具的context，因此Vue在title上找不到undefined [当在context中的rooms上进行迭代时。

Answer 2

根据@jjchiw的建议-这正在起作用。

v-for