无法在vuetable-2中使用数组访问字段

Question

我有以下JSON数组并在vue.js中使用vuetable-2

在字段中，我有

fields: [
            {
               name: 'name',
               title: 'Name'
            },
            {
               name: 'roles',
               title: 'Roles'
            }

         ],

角色列没有显示任何值。

但是我可以通过单击单击

来访问数组

<vuetable ref="vuetable"
      :api-url="url"
      :http-options="headerOptions"
      fields="fields"
      pagination-path=""
      :css="css.table"
      :multi-sort="true"
      @vuetable:pagination-data="onPaginationData">

同样在DetailRow.vue中，我可以访问相同的数组

<template>
    <div @click="onClick">
        <div class="inline field">
            <label>Description: </label>
            <span>{{rowData.name}}</span>
        </div>
        <div class="inline field">
            <label>Role: </label>
            <span>{{rowData.roles[0].roles}}</span>
        </div>
    </div>
</template>

如何直接访问表格列中的数组？

Answer 1

字段定义中的name选项不支持数组引用，但回调函数可以解决问题。如果您想显示角色，请尝试此操作。

fields: [
            {
               name: 'name',
               title: 'Name'
            },
            {
               name: 'roles',
               title: 'Roles',
               callback: 'getRole',
            }

         ],

方法应如下所示

methods: {
            getRole(value) {
                return value[0].roles;
            },
}