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

Answer 1

您可以在循环中使用(key,value)pairfor

var app = new Vue({
  el:'#app',
  data() {
  return {
    shoppingItems: [
      {name: 'apple', price: '10'},
      {name: 'orange', price: '12'}
    ]
  }
}
});

li span{
  text-transform: capitalize;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<ul>
  <li v-for="item in shoppingItems">
    <span v-for="(v,i,count) in item">{{i}} - {{v}}<span v-show="count<(Object.keys(item).length-1)
">, </span></span>
  </li>
</ul>
</div>

Answer 2

可以遍历与键/值这个：

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