Vue-good-table: Invalid attempt to spread non-iterable instance

[luizzz]

Issue Type (delete the irrelevant ones)

• [x] Bug

Specs

What version are you using?
Latest version (2.16.3)

What browser?
Chrome version 73.0.3683.86

Expected Behavior

What did you expect to happen?
No console errors

Actual Behavior

What actually happened?
Console alerts. Btw, the table looks fine.

vue.esm.js:566 TypeError: Invalid attempt to spread non-iterable instance at vue-good-table.es.js:81 at v (vue-good-table.es.js:35) at vue-good-table.es.js:1667 at s (index.js:35) at e.exports (index.js:289) at a.paginated (vue-good-table.es.js:1664) at mt.get (vue.esm.js:2881) at mt.evaluate (vue.esm.js:2988) at a.paginated (vue.esm.js:3265) at a.selectedPageRows (vue-good-table.es.js:1458) z @ vue.esm.js:566

[patrickbolle]

I had this happening as well - though in Nuxt.js it crashed the whole client application.

My workaround was to use a computed property like this -

    computed: {
      filtered_waiting: function() {
        let data_array = this.waiting_customers;
        if (data_array.length > 0) {
          return data_array;
        } else {
          return [];
        }
      }
    }

Basically I think vue-good-table grabs the data array, but if there is no data in the array (something like that) it bugs out with this error message. My computed variable above returns [] which for some reason bypasses this issue.

Don't ask me how or why this works, but it worked for me - give it a go!

[xaksis]

@luizzz @patrickbolle this happens if you provide a non-array object to rows property. If you're loading rows via asynchronous request, Just put a v-if on your table

<vue-good-table 
  v-if="rows && rows.length"
  :rows="rows"
...

closing.

[mikeRChambers610]

For anyone it might help, this issue happened for me because I was trying to use a graphql query in the wrong way. I was doing the initial query which returned an object and then I was trying to refetch the same query but I was trying to return it in an items array. Once I removed the items[] the issue was solved.

GraphQL that had the issues:
graphql(myQuery, {

options: props => ({

    variables: {
      userID: " ",
      groupID: " "
    },
    fetchPolicy: 'cache-and-network'
}),
props: props => {
    return {

    dataReturned: props.data.getData,

    onGetMoreData: vars => {
      return props.data.fetchMore({
        query: myQuery,
        variables: vars,
        updateQuery: (previousResult, { fetchMoreResult }) => ({
          getData: {
            __typename: 'Data',

// items below was the issue
items: [
...fetchMoreResult.getData
]
}
})
})
},
data: props.data,
}
}
}),

After removing items (this fixed my issue)
graphql(myQuery, {

options: props => ({

    variables: {
      userID: " ",
      groupID: " "
    },
    fetchPolicy: 'cache-and-network'
}),
props: props => {
    return {

    dataReturned: props.data.getData,

    onGetMoreData: vars => {
      return props.data.fetchMore({
        query: myQuery,
        variables: vars,
        updateQuery: (previousResult, { fetchMoreResult }) => ({
          getData: {
            __typename: 'Data',

// items below was the issue
items: [
...fetchMoreResult.getData
]
}
})
})
},
data: props.data,
}
}
}),

[daniel-saifulin]

...as option

<vue-good-table 
  :rows="rows || []"
...

[p0psicles]

Wel that depends. If rows is an object it will still error. As an object evaluates to true.

[titusdecali]

If you're using mapGetters to get your data via Vuex and are seeing this error, you simply need to change your vuex data variable's initial state from null to [].

const state = { rowsData: [] }