Как правильно использовать vuetable-2 для отображения выпадающей дополнительной информации?

Question

[Наталия]

Добрый день!
У меня есть perl с данными в JSON-формате:

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

в основной компонент прокидываю доп данные для отображения по клику

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

выношу в отдельный tempalate вид для этих доп данных:

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

в методах пишу:

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

Сейчас по клику на onCellClicked вываливаются доп данные в виде JSON, без форматирования,
пример:
[ { "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" } ]

Как мне сделать, чтоб выводились только значения этих доп данных?

Заранее спасибо за ответ / либо наводку на него

Answer 1

[Наталия]

Принцип действия такой будет:

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