Vue.js如何在数组中循环和设置对象属性？

Question

我目前正在使用Vue.JS，我在使用v-for循环输出一些数据时遇到了一些麻烦。

我的目标是让“基础”项目重复，但包含唯一信息，请参阅下面的图片以供参考。

到目前为止，我有点努力了。我不确定这是否是“最好”或最有效/最佳的方式，所以我希望有人可以给我一些建议。

<template>
<div>
  <ul>
    <li v-for="value in items">
        {{ value.itemname }}
        {{ value.itemprice }}
        {{ value.bInStock }}
    </li>
  </ul>
</div>
</template>

<script>
export default {
  data: function () {
    return {
        items: [
          {
            itemquality: "Brand new",
            itemname: "Test Item Name",
            itemprice: "$426.32",
            bInStock: false
          },
          {
            itemquality: "Used",
            itemname: "Test Item Name 2",
            itemprice: "$126.32",
            bInStock: true
          }
        ]
    }
  }
}
</script>

我遇到的下一个问题是根据'items'数组中的数据将类绑定到一个值。如果我不使用数组，而只是拥有一个对象，我就能做到;

  <li v-for="(value, key) in myArrayOfObjects">
     <div :class="{'my-price-class': key === 'price'}"> {{value}}</div>
  </li>

但是，因为我有一个数组，返回的'key'就是数组索引。有什么方法可以使用对象属性，如; 'itemname'作为键，而它在一个数组内？

任何帮助表示赞赏。 :)

Answer 1

做就是了

<li v-for="item in array">
  <div class="price-div">{{ item.price }}</div>
</li>

回到问题，为了实现你提到的行为，只需再次遍历项目（对象）以获取键值

new Vue({
  el: '#app',
  data() {
    return {
      myArr: [{
        key1: 'some key value 1',
        key2: 'some key value 2',
        redKey: 'red key value',
        key4: 'some key value 3'
      }]
    }
  }
})

.red {
  background: red;
  color: white
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>


<div id="app">
  <div v-for="(value in myArr">
    <div v-for="(v, k) in value">
      <p :class="{red: k === 'redKey'}">
        {{ k }} : {{ v }}
      </p>
    </div>
  </div>
</div>