Vue.jsパラメータ化された変数名

Question

変数名をプロパティとしてプロパティに渡すことができるように変数名をパラメータ化しようとしています。以下の例では、アイテム変数の名前を配列に渡すために、これを使用して、バインディングなしでアイテム変数名を知ることができます。

<div id="myApp"> 
    <h2>parameterized variable names</h2> 
    <table> 
     <tr> 
     <th v-for="label in labels">{{label}}</th> 
     </tr> 
     <tr v-for="item in items"> 
     <td v-for="label in labels">{{item.label}}</td> 
     </tr> 
    </table> 
</div> 

マイVueのインスタンスは、次のようになります -

new Vue({ 
    el: '#myApp', 
    data: { 
     labels:[ 
     'text', 
     'value' 
     ], 
     items:[ 
     {text: 'One', value: 'A', something:'12'}, 
     {text: 'Two', value: 'B', something:'67'}, 
     {text: 'Three', value: 'C', something:'66'} 
     ] 

    } 
}); 

宣言{{item.label}}に「ラベル」と呼ばれる変数をレンダリングしようとしているので、これは動作しません。 'label'はリテラル変数名ではないことをどのように伝えることができますか？

Answer 1

次は動作するはずですので、あなたは、Vue.jsテンプレートで配列構文を使用することができます。

<td v-for="label in labels">{{ item[label] }}</td>