javascript - Vue.js 参数化变量名称

Question

我正在尝试参数化变量名称，以便它们可以作为属性传递到我的组件中。在下面的示例中，我想使用它将项目变量的名称传递到数组中，以便我可以有选择地将它们显示为表中的列，而绑定(bind)不必知道项目变量名称。

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