Vue.js Variablennamen parametrisiert

Question

Ich versuche Variablennamen zu parametrisieren, so dass sie als Eigenschaften in meine Komponente übergeben werden können. Im folgenden Beispiel möchte ich die Namen der Elementvariablen in das Array eingeben, damit ich sie selektiv als Spalten in einer Tabelle anzeigen kann, ohne dass die Bindung die Namen der Elementvariablen kennen muss.

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

Meine Vue Beispiel sieht wie folgt aus -

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'} 
     ] 

    } 
}); 

Das funktioniert nicht, weil es {{item.label}} 'label' in der Erklärung genannt, eine Variable zu machen versucht. Wie kann ich sagen, dass "Label" nicht der Name der Literalvariablen ist?

Answer 1

Sie können Array-Syntax in Vue.js Vorlagen verwenden, so sollten folgende Arbeiten:

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