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

Posted 2023-02-23

【中文标题】Vue 3 通过变量名访问对象属性

【英文标题】：Vue 3 access object property by variable name

【发布时间】：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的数据

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

【参考方案1】：

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

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

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