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'的变量。我怎么能告诉它'label'不是文字变量名？

Answer 1

您可以在Vue.js模板中使用数组语法，因此以下内容应该有效：

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

Vue.js参数化变量名称

1 个答案: