v-forのオブジェクトプロパティ名へのアクセス方法

Question

vuejsを新しくしました。 私はv2でプレイし始めました。 私は私のインスタンスデータプロパティにオブジェクトを持つ単純な配列を持っている：

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

私はシンプルなV-のために行う：

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