如何在 vue.js 中显示嵌套对象答案

【问题标题】：how to display nested objects in vue.js如何在 vue.js 中显示嵌套对象
【发布时间】：2024-01-06 18:45:01
【问题描述】：

我返回的数据是一个带有嵌套对象的对象数组。我无法在模板的 v-for 循环中显示“事件”，因为我似乎无法访问返回数据的那部分。

数据是这样返回的（来自 Vue DevTools）：

list: Object
    user: "name"
    id: "id"
    events: Array[3]
        0: Object
           title: "event 1"
        1: Object
           title: "event 2"
        2: Object
           title: "event 3"

使用 Vue 资源（通过 CDN）如何仅显示模板中的事件？

模板：

<template id="events-template">
  <div v-for="events in list">
    @{{events.title}}
  </div>    
</template>

我的申请：

Vue.component('events', {
template: '#events-template',

data: function() {
    return {
        list: []
    }
},

created: function() {
    this.fetchEventsList();
},

methods: {
    fetchEventsList: function() {
        this.$http.get('events', function(events) {
            this.list = events;
        }).bind(this);
    }
}

});

【问题讨论】：

您可以将list 变量的json 添加到您的问题中吗？
@Fiete 我不完全确定你的意思；但是我重写了第一个代码块以匹配 Vue DevTools 中显示的确切响应

标签： javascript object nested vue.js vue-resource

【解决方案1】：

好的，您似乎尝试访问循环中的错误属性。

list 变量不包含列表/数组（对象）。您要迭代的数组是 list 对象的 events 属性。所以list.events

此外，您还想访问循环中“当前”项目（事件）的属性（标题）。然后您不必访问孔数组，而是访问当前元素。 event.title

替换你的模板块：

<template id="events-template">
    <div v-for="event in list.events">
        @{{event.title}}
    </div>    
</template>

【讨论】：