vue.js - Vue.js 迭代中的打印键

Question

我有如下数组

data() {
  return {
    shoppingItems: [
      {name: 'apple', price: '10'},
      {name: 'orange', price: '12'}
    ]
  }
}

我正在尝试像下面那样迭代

<ul>
  <li v-for="item in shoppingItems">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

我得到如下输出

• 苹果 - 10
• 橙色 - 12

但我想得到如下输出

• name - apple, price - 10 //我想动态打印 key
• 名称 - 橙色，价格 - 12

标签： vue.js

Answer 1

您可以使用以下方法迭代键/值：

<div v-for="(value, key) in object">
  {{ key }} - {{ value }}
</div>

您还可以拥有当前键的索引：

<div v-for="(value, key, index) in object">
  {{ key }} - {{ value }}
  // if index > 0, add comma
</div>