Quasar отображает строки таблицы из объекта хранилища объектов - PullRequest
Новая
       28

Quasar отображает строки таблицы из объекта хранилища объектов

0 голосов
/ 01 октября 2019

У меня проблема с отображением данных в моей q-таблице. Проблема в том, что я хранил данные в хранилище как объект объекта, но q-таблица требует данные как массив объектов. Это мой код

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. Итак, как мне нужно отформатировать мой код для отображения строк таблицы, поскольку «задачи» объекта хранилища должны быть объектом объектов, и я не могу переформатировать его как массив объектов.

Если вам нужнодополнительную информацию, пожалуйста, дайте мне знать, и я предоставлю. Спасибо!

1 Ответ

1 голос
/ 01 октября 2019

Вы можете просто создать другое (локальное) вычисление arrayTasks из tasks и использовать его для q-таблицы 

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
    })
}
...