如何在v-for中訪問對象屬性名稱

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

您可以在v-for中獲取引用名稱而不是索引的屬性名稱：

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

Answer 2

我認為最直接的解決方案是利用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>