Quasar 显示对象的存储对象中的 table 行

Question

我在 q-table 中显示数据时遇到问题。问题是因为我已经将数据作为对象的对象存储在存储中，但是 q-table 需要数据作为对象数组。这是我的代码

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
    }

组件

<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>

这会产生问题Invalid prop: type check failed for prop "data". Expected Array, got Object。那么我需要如何格式化我的代码以显示 table 行，因为存储对象 "tasks" 需要是对象的对象，我不能将它重新格式化为对象数组。

如果您需要任何其他信息，请告诉我，我会提供。谢谢！

Answer 1

您可以简单地从 tasks 创建另一个（本地）计算 arrayTasks 并将其用于 q-table

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

和模板

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

如果你不需要原始任务作为对象的对象，你也可以这样做

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

Quasar 显示对象的存储对象中的 table 行

Quasar display table rows from store object of objects

javascript

vue.js

vuejs2

vuex

quasar-framework