在VueJS中通过这个数组时卡住了

Question

也许这是一个已经回答了的问题，但我仍然无法找到解决这个简单问题的方法。我如何使用v-for循环访问这个JSON对象并打印每个汽车品牌和“instock”值？

carStore: [
  {
    BrandOne: {
      id: 1,
      name: 'some name',
    },
    inStock: 50,
  },

  {
    BrandTwo: {
      id: 2,
      name: 'some name',
    },
    inStock: 100,
  },

  {
    BrandThree: {
      id: 3,
      name: 'some name',
    },
    inStock: 0,
  },
]

Answer 1

如果允许您更改数据结构，我建议您这样做：

"carStore":[
   {
      "id":1,
      "name":"some name",
      "inStock":50
   },
   {
      "id":2,
      "name":"some name",
      "inStock":100
   },
   {
      "id":3,
      "name":"some name",
      "inStock":0
   }
]

然后你可以像这样在Vue中苦恼：

html prettyprint-override"><div v-for="(item, key) in carStore" :key="key">
    id:  {{item.id}} - name: {{item.name}} - instock: {{item.inStock}}
</div>