What is the correct way to use vuetable-2 to display dropdown additional information?

Question

Vue.js

Good afternoon!
I have perl with data in JSON format:

...
data => [{
        'id'=> '1',
        'first_name'=> 'Henrietta',
        'number'=> '73',
        'count_calls'=> '82',
        'list_calls'=> [
            {
                'id_call'=> '54',
                'expert_system'=> 'transform cutting-edge channels',
                'user_id'=> '52'
            },
            {
                'id_call'=> '9',
                'expert_system'=> 'incentivize one-to-one content',
                'user_id'=> '27'
            },
            {
                'id_call'=> '81',
                'expert_system'=> 'iterate rich e-services',
                'user_id'=> '48'
            },
            {
                'id_call'=> '71',
                'expert_system'=> 'engineer global e-business',
                'user_id'=> '26'
            },
            {
                'id_call'=> '44',
                'expert_system'=> 'integrate impactful e-services',
                'user_id'=> '10'
            }]
        }, {
              'id'=> '2',
              'first_name'=> 'Bernie',
              'number'=> '12',
              'count_calls'=> '88',
              'list_calls'=> [
                {
                  'id_call'=> '49',
                  'expert_system'=> 'syndicate 24/365 vortals',
                  'user_id'=> '21'
                },
                {
                  'id_call'=> '82',
                  'expert_system'=> 'grow revolutionary metrics',
                  'user_id'=> '82'
                },
                {
                  'id_call'=> '5',
                  'expert_system'=> 'drive viral bandwidth',
                  'user_id'=> '32'
                }
              ]
            }
       ]

I pass additional data to the main component to display on click

<vuetable ref="vuetable"
   ...
   ...
   ...
   detail-row-component="my-detail-row"
   @vuetable:cell-clicked="onCellClicked"
>
</vuetable>

I put it in a separate tempalate view for these additional data:

<script type="text/x-template" id="detail-row-tmpl">
        <div @click="onClick">
            <div class="field">
                <label> Дополнительные данные: </label>
                <span> {{rowData.list_calls}} </span>
            </div>
        </div>
    </script>

in methods I write:

methods: {
            onCellClicked (data, list, event) {
                // console.log('cellClicked: ', list.name)
                this.$refs.vuetable.toggleDetailRow(data.id)
            }
}

Now, on clicking on onCellClicked, additional data is thrown out in the form of JSON, without formatting,
example:
[ { "expert_system": "transform cutting-edge channels", "id_call": "54", "user_id": "52" }, { " expert_system": "incentivize one-to-one content", "id_call": "9", "user_id": "27" }, { "expert_system": "iterate rich e-services", "id_call": "81" , "user_id": "48" }, { "expert_system": "engineer global e-business", "id_call": "71", "user_id": "26" }, { "expert_system": "integrate impactful e- services", "id_call": "44", "user_id": "10" } ]
How can I make it so that only the values ​​​​of these additional data are displayed?
Thanks in advance for the answer / or tip on it

Answer 1

The principle of action will be:

<script type="text/x-template" id="detail-row-tmpl">
        <div @click="onClick">
            <div class="field">
                <label> Дополнительные данные: </label>
                <table>
                    <thead>
                        <template v-for="el in rowData.list_calls">
                            <th>
                                {{el.id_call}}
                            </th>
                            <th>
                                {{el.otherKey }}
                            </th>
                            .....  
                        </template>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </script>