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

Question

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

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.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."

我对 Vue 很陌生，所以我点击了文档的链接，但是它并没有真正解释如何以这种特殊的方式执行此操作，从我一直关注的教程来看，这看起来是正确的，但是又一次，这些教程并没有真正解释这种情况。

这是正确的做法吗？

Answer 1

1. 您必须使用props 将数据从父组件传递到子组件。
2. 您可以使用“点表示法”来访问对象属性。如果您想使用括号表示法访问，您应该编写像 obj['property'] 这样的字符串。 Read property accessors

Vue.component('building', {
  props: ['building'],
  template: `
        <div :key="building.id" class="card" style="display: block;" v-on:click="buy_building(building.id)">
            <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>
        `,
  methods: {
    buy_building(itemId) {
      alert(itemId);
    }
  }
});

new Vue({
  el: 'building-list',
  template: `<div><building v-for="item in buildings" :building='item' :key='item.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
        }

      }
    }

  }

});

    .card {
      outline: 1px solid aquamarine;
      width: 200px;
    }

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div class="container-fluid">
  <building-list></building-list>
</div>