Encountering an issue with displaying data in my q-table. The problem stems from storing data in the store as an object of objects, whereas q-table requires data to be in the form of an array of objects. Below is the code snippet:
store.js
import Vue from 'vue'
const state = {
tasks: {
'ID1': {
name: 'Go to shop',
completed: false,
dueDate: '2019/05/12',
dueTime: '18:30'
},
'ID2': {
name: 'Get bananas',
completed: false,
dueDate: '2019/05/13',
dueTime: '14:00'
},
'ID3': {
name: 'Get apples',
completed: false,
dueDate: '2019/05/14',
dueTime: '16:00'
}
}
}
export default {
namespaced: true,
state,
mutations,
actions,
getters
}
Component
<template>
<q-page padding>
<q-table
padding
title="Tasks"
:data="tasks"
:columns="columns"
row-key="name"
hide-bottom
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="name" :props="props">
{{ props.name }}
</q-td>
<q-td key="created" :props="props">
{{ props.created }}
</q-td>
</q-tr>
</template>
</q-table>
</q-page>
</template>
<script>
import {mapState} from 'vuex'
export default {
data () {
return {
columns: [
{ name: 'name', required: true, label: 'Name', align: 'left', field: row => row.name, sortable: true },
{ name: 'created', required: true, label: 'Created', align: 'left', field: row => row.created, sortable: false },
],
}
},
computed: {
...mapState('tasks')
}
}
</script>
Facing the issue
Invalid prop: type check failed for prop "data". Expected Array, got ObjectIf further details are needed, please let me know. Thank you!