Q-таблица в структуре квазара, таблица данных состояния не отображается

Question

Q-таблица в структуре квазара, таблица данных объекта состояния не отображается, я пробовал это, но не работает,

кто-нибудь, пожалуйста, помогите мне. Извините, я еще новичок в этой теме

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
      ...mapGetters('dataku', ['dataku'])
  },
  data () {
    return {
      columns: [
        { name: 'id', label: 'ID', field: 'id', value: 'id' },
        {
          name: 'name',
          required: true,
          label: 'Dessert (100g serving)',
          align: 'left',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'calories', label: 'Calories', field: 'calories', value: 'calories' },
        { name: 'fat', label: 'Fat (g)', field: 'fat', value: 'fat'},
        { name: 'carbs', label: 'Carbs (g)', value: 'crabs', field: 'carbs' },
        { name: 'protein', label: 'Protein (g)', value: 'protein', field: 'protein' },
        { name: 'action', label: 'Action', value: 'action', field: 'action', align: 'center' }
      ],
    }
  }
}
</script>

// это vuex

const state = {
      dataku: {
        'iD1' : {
          name: 'Baghoy',
          calories: 19,
          fat: 6.0,
          carbs: 24,
          protein: 4.0
        },
        'iD2' : {
          name: 'Ice cream sandwich',
          calories: 27,
          fat: 9.0,
          carbs: 37,
          protein: 4.3

        },
        'iD3' : {
          name: 'Eclair',
          calories: 22,
          fat: 16.0,
          carbs: 23,
          protein: 6.0
        }
      }
}

const mutation = {

}

const action = {

}

const getters = {
    dataku: (state) => {
        return state.dataku
    }

}

export default {
    namespaced: true,
    state,
    mutation,
    action,
    getters
}

<template>
  <div class="q-pa-md">
    <q-table
      title="Treats"
      :data="dataku"
      :columns="columns"
      row-key="name"
      key="key"
      :id="key"
    >
    <template v-slot:body-cell-action = "props">
    <q-td :props="props">
      <div>
      <q-td key="action" :props="props">
        <div class="right">
        <q-btn flat scratch  align="right" class="center" color="primary" icon="edit" @click="editItem(dataku)"/>
        <q-btn flat scratch  align="right" color="primary" icon="delete" @click="deletItem(dataku)"/>
         </div>
          </q-td>
          </div>
        </q-td>
  </template>
      </q-table>
  </div>
</template>

Answer 1

Вам необходимо изменить структуру данных. Попробуйте этот код.

vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
    dataku: [
      {
        id: 'iD1',
        name: 'Baghoy',
        calories: 19,
        fat: 6.0,
        carbs: 24,
        protein: 4.0
      },
      {
        id: 'iD2',
        name: 'Ice cream sandwich',
        calories: 27,
        fat: 9.0,
        carbs: 37,
        protein: 4.3

      },
      {
        id: 'iD3',
        name: 'Eclair',
        calories: 22,
        fat: 16.0,
        carbs: 23,
        protein: 6.0
      }
    ]
  },
  getters: {
    dataku: (state) => state.dataku
  },
});

export default store

Поскольку данные поддерживают ожидаемый массив, вы передали объект.

computed: {
    ...mapGetters(['dataku']),
}



<q-table
  title="Treats"
  :data="dataku"
  :columns="columnss"
  row-key="name"
  key="key"
>
  <template v-slot:body-cell-action="props">
    <q-td :props="props">
      <div>
        <q-td key="action" :props="props">
          <div class="right">
            <q-btn flat scratch align="right" class="center" color="primary" icon="edit/>
            <q-btn flat scratch align="right" color="primary" icon="delete"/>
          </div>
        </q-td>
      </div>
    </q-td>
  </template>
</q-table>