Quasar display table rows from store object of objects

Question

I'm having a problem displaying data in my q-table. The problem is because I have stored data in store as object of object, but q-table requires data as array of objects. This is my code

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>

This produces a problems Invalid prop: type check failed for prop "data". Expected Array, got Object. So how I need to format my code in order to display table rows, since store object "tasks" need to be an object of objects and I can't reformat it as array of objects.

If you need any additional informations, please let me know and I will provide. Thank you!

Answer 1

you can simply create an other (local) computed arrayTasks from tasks and use it for q-table

computed: {
    ...mapState('tasks'),
    arrayTasks() {
        return Object.values(this.tasks);
    }
}

and template

<q-table
    padding
    title="Tasks"
    :data="arrayTasks"
    :columns="columns"
    row-key="name"
    hide-bottom
>

if you don't need original tasks as Object of Objects, you can also do like this

computed: {
    ...mapState({
        tasks: state => Object.values(state.tasks) // Object values to Array
    })
}