Vue 按变量名访问对象属性

列表数据从父组件那里传过来

table_fields: [
    {label: 'Var 1', field: 'var_1'},
    {label: 'Var 2', field: 'var_2'},
    {label: 'Var 3', field: 'var_3'},
    {label: 'Var 4', field: 'var_4'},
    {label: 'Var 5', field: 'var_5'},
],

在子组件中，可以这样做

<table id="companiesList" class="table table-sm table-stripedd table-borderless table-hover table-responsivev">
    <thead>
        <tr>
            <th data-type="text" v-for="tableField in tableFields"  :key="tableField">{{tableField.label}}</th>
        </tr>
    </thead>
    <tbody v-if="date_loaded">
        <tr  v-for="single in data.data" :key="single.DUNS">
            <td v-for="tableField in tableFields" :key="tableField">{{single.tableField.label}}</td>
        </tr>
    </tbody>
    <tbody v-else>
        <tr>
            <td colspan="12" class="text-center">Loading...</td>
        </tr>
    </tbody>
</table>

这里从一个API调用中获取数据。

表头与预期一样，但不确定如何从循环中的API数据中获取值。

试过这个：

{{single.tableField.label}}：无法读取未定义的属性’label’

{{single.{{tableField.label}}}}：解析错误

解决方法：
使用括号表示法访问变量属性名single，否则代码将查找名称为字符串tableField的属性，该字符串不存在：

<td v-for="tableField in tableFields" :key="tableField.label">
  {{ single[tableField.label] }}
</td>

使用点表示法时，段将作为文字属性名。使用方括号表示法时，方括号内的表达式将作为属性名进行求值。

参考：
https://www.5axxw.com/questions/content/2ber11
https://cn.vuejs.org/v2/guide/list.html#在组件上使用-v-for