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>

我遇到的下一个问题是将一个类绑定到一个基于“项目”数组中的数据的值。 如果我不使用数组，而只使用一个对象，我可以这样做；

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

但是，因为我有一个数组，所以返回的“键”只是数组索引。有什么方法可以使用对象属性，例如； '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>