Data Table failed for prop "data". Expected Array, got Object.

[jwdobken]

I just started with Vue and have to following issue.

My data is object oriented, such as:

{
22: {name:"John", id:22, friends:[5,31,55], works:{books:[], films:[],}
12: {name:"Ivan", id:12, friends:[2,44,12], works:{books:[], films:[],}
}

retreived with the following state attribute:

computed: {
  ...mapState({
    persones: state => state.persons.persons
  }),

So I get an expected warning:

[Vue warn]: Invalid prop: type check failed for prop “data”. Expected Array, got Object.

Now, to solve the issue I would use lodash’ toArray:

computed: {
  ...mapState({
    persones: state => _.toArray(state.persons.persons)
  }),

But now, the persons attributes is empty ALWAYS

[Max]

looking at your data structure, you dont have an array of objects! you have one object!
you should supply an array of objects from your backend, this will solve your problem:

[
{name:"John", id:22, friends:[5,31,55], works:{books:[], films:[]},
{name:"Ivan", id:12, friends:[2,44,12], works:{books:[], films:[]}
]

[benoitranque]

Use this

computed: {
  ...mapState({
    persones: state => Object.values(state.persons.persons)
  }),

[jwdobken]

Ah… the answer by @benoitranque did solve my issue, but now the table is not updated dynamically :s when I add a new person (on the same page) I have to refresh to see it

[benoitranque]

@jwdobken I’m not surprised. Using a function in the mapState helper is new to me. You should use getters instead. Your code would look like this:

// store.js
export default new Vuex.Store({
  state: {
    persons: {
      persons: {
        // this is the data you want
      }
    }
  },
  getters: {
    allPersons (state) {
      return Object.values(state.persons.persons)
    }
  }
})
// if using the new structure in quasar 0.15, in getters.js
export function allPersons (state) {
  return Object.values(state.persons.persons)
}

// usage in a .vue component
import { mapGetters } from 'vuex'
export default {
  computed: {
    // if using root store
    ...mapGetters({
      persons: 'allPersons'
    }),
    // if using store module
    ...mapGetters('storeModuleName', {
      persons: 'allPersons'
    }),
  }
}