Vue.JS如何访问组件循环中的对象属性

我有一个项目列表作为一个组件：

Vue.component('building-list', {

    template: `<div><building v-for="building in buildings">{{ building.id }}</building></div>`,

    data() {

        return {

                buildings: {

                    'scavenger': { id: 'scavenger', name: "desh scavenger", amount_owned: 0, cost: 10, base_cps: 1, description: "A scavenger, specialising in the aquisition of Desh" },
                    'vaporator': { id: 'vaporator', name: "moisture farm", amount_owned: 0, cost: 50, base_cps: 2 },
                    'cantina': { id: 'cantina', name: "cantina", amount_owned: 0, cost: 650, base_cps: 3 },
                    'bazaar': { id: 'bazaar', name: "bazaar", amount_owned: 0, cost: 7800, base_cps: 4 },
                    'droidshop': { id: 'droidshop', name: "droid workshop", amount_owned: 0, cost: 80000, base_cps: 5 },
                    'bountyhunter': { id: 'bountyhunter', name: "bounty hunter guild", amount_owned: 0, cost: 140000, base_cps: 6 },
                    'kybermine': { id: 'kybermine', name: "kyber crystal mine", amount_owned: 0, cost: 250000, base_cps: 7 }

                }
        }

    }

});

我对Vue非常陌生，所以我按照文档的链接进行了操作，但是从我一直遵循的教程来看，它并没有真正解释如何以这种特定的方式进行操作，这看起来是正确的，但是这些教程也没有真正解释这种情况

这样做对吗

必须使用for将数据从父组件传递到子组件

您可以使用“点符号”访问对象属性。如果您想使用括号表示法获得访问权限，您应该编写类似于obj['property']的字符串

Vue.component（'building'）{
道具：[“建筑”]，
模板：`
{{building.name}
成本：{{building.cost}

拥有：{{building.amount_owned}

`,
方法：{
购买大楼（项目ID）{
警报（itemId）；
}
}
});
新Vue({
el:‘建筑清单’，
模板：``，
数据（）{
返回{
建筑物：{
“清道夫”：{
id:'清道夫'，
名称：“desh清道夫”，
拥有的金额：0，
费用：10，
基本单位cps:1，
描述：“一个食腐动物，专门采集Desh”
},
“汽化器”：{
id:'汽化器'，
名称：“湿气农场”，
拥有的金额：0，
费用：50美元，
基本消费物价指数：2
},
“小酒馆”：{
id:'酒馆'，
名称：“酒馆”，
拥有的金额：0，
费用：650，
基本消费物价指数：3
},
“集市”：{
id:“集市”，
名称：“集市”，
拥有的金额：0，
费用：7800，
基本消费物价指数：4
},
“机器人商店”：{
id:'机器人商店'，
名称：“机器人工作室”，
拥有的金额：0，
费用：80000，
基本消费物价指数：5
},
“赏金猎人”：{
id:‘赏金猎人’，
名称：“赏金猎人公会”，
拥有的金额：0，
费用：14万，
基本消费物价指数：6
},
“凯伯明”：{
id:'kybermine'，
名称：“凯伯水晶矿”，
拥有的金额：0，
费用：25万美元，
基本消费物价指数：7
}
}
}
}
});
.card{
外形：1px固体海蓝宝石；
宽度：200px；
}

谢谢，这正是我想要的@欢迎你！这回答了你的问题吗？
Vue.component('building', {

    template: `

        <div :key="building[id]" class="card" style="display: block;" v-on:click="buy_building(building[id])"> 
            <img :src="building[id]" style="cursor: pointer; width:100%; height:145px;">
            <div class="card-block">
                <h4 class="card-title">{{ building[name] }}</h4>
                <p class="card-text">cost: {{ building[cost] }}</p>
                <p class="card-text">owned: {{ building[amount_owned] }}</p>
            </div>
        </div>`

});

        <div class="container-fluid">

            <building-list></building-list>

        </div>

"Property or method "building" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties."