Vuetable-2: Cannot access field with arrays

[hanxue]

I have the following JSON array

{
        "shot_deadline": null,
        "shot_description": "It's a wonderful world",
        "shot_end_frame": null,
        "shot_frame": 36,
        "shot_id": 79,
        "shot_name": "P&G",
        "shot_note": "Remember the milk",
        "shot_resolution": null,
        "shot_stage_id": 1,
        "shot_stage_name": "One",
        "shot_start_frame": null,
        "shot_thumbnail": null,
        "shot_version": [
            {
                "review": [
                    {
                        "review_content": "Wow this is good",
                        "review_id": 193,
                        "review_time": "Thu, 27 Jul 2017 18:25:53 GMT",
                        "shot_stage_id": 1,
                        "shot_stage_name": "One",
                        "shot_status_id": 9,
                        "shot_status_name": "Ready",
                        "shot_version_id": 17,
                        "staff_id": 3,
                        "staff_name": "jean"
                    }
                ],
                "shot_id": 79,
                "shot_status_id": 6,
                "shot_status_name": "WIP",
                "shot_version_id": 17,
                "shot_version_name": "Ka chink",
                "shot_version_review_path": "/some/path"
            },
            {
                "review": [],
                "shot_id": 79,
                "shot_status_id": 14,
                "shot_status_name": "Done",
                "shot_version_id": 18,
                "shot_version_name": "Bang",
                "shot_version_review_path": "/some/path"
            }
        ]
    ,

In fields, I have

fields: [
                {
                    name: 'shot_name',
                    sortField: 'shot_name',
                    title: 'Shot'
                },
                {
                    name: 'shot_version[0].shot_status_name',
                    sortField: 'shot_status_name',
                    title: 'Status',
                    titleClass: 'center aligned',
                    dataClass: 'center aligned'
                },

There is no value displayed.

But I can access the array in cell-clicked

<vuetable ref="vuetable"
        :sort-order="sortOrder"
        :multi-sort="true"
        multi-sort-key="alt"
        api-url="http://localhost:1234/path/to/api"
        :fields="fields"
        track-by="shot_id"
        data-path=""
        pagination-path=""
        :per-page="20"
        @vuetable:pagination-data="onPaginationData"
        detail-row-component="my-detail-row"
        @vuetable:cell-clicked="onCellClicked"
        >

onCellClicked(data, field, event) {
            console.log('DEBUG: data.shot_version[0].shot_status_name is ' + JSON.stringify(data.shot_version[0].shot_status_name))
            this.$refs.vuetable.toggleDetailRow(data.shot_id)
        }
// Output in browser console:
// DEBUG: data.shot_version[0].shot_status_name is "WIP" 1 280:180:13

Also in DetailRow.vue, I can access the same array

<template>
    <div @click="onClick">
        <div class="inline field">
            <label>Description: </label>
            <span>{{rowData.shot_description}}</span>
        </div>
        <div class="inline field">
            <label>Note: </label>
            <span>{{rowData.shot_note}}</span>
        </div>
        <div class="inline field">
            <label>Status: </label>
            <span>{{ rowData.shot_version[0].shot_status_name }}</span>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        rowData: {
            type: Object,
            required: true
        },
        rowIndex: {
            type: Number
        },
    },
    methods: {
        onClick(event) {
            console.log('DEBUG: rowData is ' + JSON.stringify(this.rowData))
        },
    }
}

How do I directly access the array in the table column?

[ratiw]

The name option in field definition does not support array referencing. The reason that it works in events and components is because it is passed a real data to. For name option, Vuetable, internally, split name string into sections and try to deference it from the topmost object, but it doesn't account for the array.

I think it is possible and there might be a better way to deal with this. I'll think about and see what I can do with the time I have. But, at the moment, it is not support, sorry.

[shafayet1991]

The name option in field definition does not support array referencing but the callback function can solve the problem. If you want to show shot_status_name then try this.

fields: [
                    {
                        name: 'shot_version',
                        callback: 'getVersionContent',
                        title: 'Shot Status Name'
                    }
           ],

methods: {
            getVersionContent(value) {
                return value[0].shot_status_name;
            },
}

[cykadev]

use the following code

    {
      name: 'groups',
      sortField: 'groups',
      title: 'Group',
      titleClass: 'text-center',
      dataClass: 'text-center',
      callback: 'customGroup' // method
    },

methods: {
customGroup(data){
var sG = ''
for (var i = 0; i < data.length; i++) {

      //For Styling
      if(i%2 == 0){
          sG += `<span class="label label-primary">${data[i].groups}</span><br>`
      }else{
          sG += `<span class="label label-default">${data[i].groups}</span><br>`
      }
    }
    return sG
},

}