Vue-good-table: onSortChange return cannot read property 'field' of undefined An error

Created on 15 Apr 2019 · 5Comments · Source: xaksis/vue-good-table

Issue Type

[x] question

Specs

What version are you using?

^2.16.3

What browser?

Google Chrome 73.0.3683.103 (Official Build) (64-bit)

Expected Behavior

What did you expect to happen?

I want it to work sort

Actual Behavior

What actually happened?

Steps to Reproduce the Problem

Please detail your steps here

 onSortChange(params) {
      this.updateParams({
        sort: {
          type: params.sortType,
          field: this.columns[params.columnIndex].field,
        },
      });
      this.loadItems();
    },

return error Cannot read property 'field' of undefined

because params is array

[{
field: "title"
type: "asc"
}]

when click to column not work with params.sortType and params.columnIndex

sort: {
     type: params.sortType,
     field: this.columns[params.columnIndex].field,
},

How can it work properly with sever side render

Source

hoanghiep1x0

Most helpful comment

Update your onSortChange to the following
```
onSortChange(params) {
this.updateParams({
sort: [{
type: params[0].type,
field: params[0].field,
}],
});
this.loadItems();
},

ujjwol05 on 24 Oct 2019

👍7

All 5 comments

hey @hoanghiep1x0 vue-good-table was enhanced to support sort by multiple columns a while back. This is why sort event now emits an array instead of object. However, the example document isn't updated to reflect this. To make this work, you simply need to update sort with an array:

onSortChange(params) {
      this.updateParams({
        sort: [{
          type: params.sortType,
          field: this.columns[params.columnIndex].field,
        }],
      });
      this.loadItems();
    },

closing.

xaksis on 26 Apr 2019

Update your onSortChange to the following
```
onSortChange(params) {
this.updateParams({
sort: [{
type: params[0].type,
field: params[0].field,
}],
});
this.loadItems();
},

ujjwol05 on 24 Oct 2019

👍7

I too ran into this issue, the docs still reference the old format https://xaksis.github.io/vue-good-table/guide/advanced/remote-workflow.html#set-mode-to-remote

alexcroox on 10 Nov 2020

👍1

Update your onSortChange to the following

onSortChange(params) {
                this.updateParams({
                    sort: [{
                        type: params[0].type,
                        field: params[0].field,
                    }],
                });
                this.loadItems();
},

cool, it's work, why hasn't the documentation been changed