Question

我是vuejs的新手。我开始玩v2。我在实例数据属性中有一个带对象的简单数组：

items: [{"theProprtyName": "thePropertyValue"}]

我做简单的v-for：

<v-list>
    <v-list-item v-for="item in items">
        <span v-for="(key, value) in map">
            {{key}}--{{value}}
        </span>
    </v-list-item>
</v-list>

呈现：

theProprtyName--thePropertyValue

是否有更优雅的方式来创造以达到最终结果？

提前致谢

Answer 1

我认为最直接的解决方案是使用computed属性：

const app = new Vue({
  el: '#app',
  data: {
    list: [
      {
        foo: 'value1',
        bar: 'value2',
        baz: 'value3'
      },
      {
        foo: 'value4',
        bar: 'value5',
        baz: 'value6'
      }
    ]
  },
  computed: {
    objList() {
      return this.list.map((item) => Object.keys(item))
    },
    keyValuePair() {
      return this.list.map((item) => {
        return Object.keys(item).reduce((acc, curr) => {
          acc.push(`${curr} - ${item[curr]}`)
          return acc
        }, [])
      })
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <div>
    <h3>Loop as normal</h3>
    <div v-for="item in list">{{item}}</div>
  <div>
  <div>
    <h3>Loop as normal</h3>
    <div v-for="item in objList">{{item}}</div>
  <div>
  <div>
    <h3>Key-Value Pair</h3>
    <div v-for="(item, idx) in keyValuePair">
      <div>{{item}}</div>
    </div>
  <div>
</div>

Answer 2

您可以在v-for中获取引用名称而不是索引的属性名称：

<div v-for="(item, name) in items" :key="name"> {{name}}</div>

如何在v-for中访问对象属性名称

2 个答案: