Vue 3 通过变量名访问 object 属性

Question

我从 parent 传递这个作为道具

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'},
],

在 child 组件中我正在这样做

<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 调用中获取数据。

table header 符合预期，但不确定如何从循环中的 API 数据中获取值。

我试过这个：

{{single.tableField.label}} : Cannot read property 'label' of undefined

{{single.{{tableField.label}}}} : Parsing error

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

的数据

如何实现？提前致谢

Answer 1

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

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

当使用 点符号 时，这些段被视为文字属性名称。当使用 方括号符号 时，方括号内的表达式被计算为属性名称。

Vue 3 通过变量名访问 object 属性

Vue 3 access object property by variable name

javascript

object

vue.js

vue-component

vuejs3