Vue 3 access object property by variable name

Question

I am passing this from the parent as a prop

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

in the child component I am doing this

<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>

Here I am getting data from an API call.

The table header is as expected, but not sure how to get value from API data in the loop.

I tried this:

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

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

Wat I want is to get data which is like {{single.var_1}}

How to achieve this? Thanks in advance

Dan · Accepted Answer · 2021-02-18 14:13:47Z

2

Use bracket notation to access a variable property name of single, otherwise the code looks for a property whose name is the string tableField, which doesn't exist:

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

When using dot notation, the segments are taken as literal property names. when using bracket notation, the expression inside the brackets is evaluated for the property name.

edited Feb 18, 2021 at 14:13

answered Feb 18, 2021 at 13:55

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 access object property by variable name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related