Vue 3 通过变量名访问对象属性答案

【问题标题】：Vue 3 access object property by variable nameVue 3 通过变量名访问对象属性
【发布时间】：2021-05-21 11:34:30
【问题描述】：

我从父级传递这个作为道具

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}}：无法读取未定义的属性“标签”

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

我想要的是获取类似于{{single.var_1}}的数据

如何做到这一点？提前致谢

【问题讨论】：

标签： javascript vue.js object vue-component vuejs3

【解决方案1】：

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

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

当使用 dot notation 时，段被视为文字属性名称。当使用 括号表示法 时，括号内的表达式会被评估为属性名称。

【讨论】：