web-dev-qa-db-fra.com

Vuetify Utilisation de datatable avec des données externes d'une API avec Vuex

Je souhaite utiliser le framework vuetify avec Vuex, mais la documentation sur son utilisation avec Vuex est limitée.

Je veux:

  • Obtenez des données d'une API externe (mais uniquement les données nécessaires)
  • Ensuite, enregistrez les données dans l'état et modifiez ou autre
  • Poussez ensuite toutes les modifications sur l'API

J'ai essayé quelques-uns des exemples de pagination et de tri externes avec vuetify, mais je n'arrive pas à afficher tous les enregistrements à moins de les coder en dur.

Je suis assez nouveau pour Vue et Vuetify, alors peut-être que je me méprends sur quelque chose.

<template>
<div>
    <v-data-table
            :headers='headers'
            :items='items'
            :length='pages'
            :search='search'
            :pagination.sync='pagination'
            :total-items='totalItemCount'
            class='elevation-1'
    >
        <template slot='items' slot-scope='props'>
            <td class='text-xs-right'>{{ props.item.id }}</td>
            <td class='text-xs-right'>{{ props.item.first_name }}</td>
            <td class='text-xs-right'>{{ props.item.last_name }}</td>
            <td class='text-xs-right'>{{ props.item.avatar }}</td>
        </template>
    </v-data-table>
</div>
</template>
<script>
import moment from 'moment'
import axios from 'axios'

export default {
  name: 'test-table',
  watch: {
    pagination: {
      async handler () {
        const rowsPerPage = this.pagination.rowsPerPage
        // const skip = (this.pagination.page - 1) * rowsPerPage
        const pageNumber = this.pagination.page
        const res = await axios.get(`https://reqres.in/api/users?page=${pageNumber}&per_page=${rowsPerPage}`)
        this.items = res.data.data
        this.$store.commit('saveTableData', this.items)
      },
      deep: true
    }
  },
  computed: {
    pages () {
      return 171
    },
    totalItemCount () {
      return 400
    }
  },
  async mounted () {
    const rowsPerPage = this.pagination.rowsPerPage
    const skip = (this.pagination.page - 1) * rowsPerPage
    const res = await axios.get(`https://reqres.in/api/users?page=${skip}&per_page=${rowsPerPage}`)
    this.items = res.data.data
    this.$store.commit('saveTableData', this.items)
  },
  methods: {
    nzDate: function (dt) {
      return moment(dt).format('DD/MM/YYYY')
    }
  },
  data: () => ({
    search: '',
    // totalItems: 0,
    items: [],
    pagination: {
      sortBy: 'Date'
    },
    headers: [
      { text: 'ID', value: 'id' },
      { text: 'First Name', value: 'first_name' },
      { text: 'Last Name', value: 'last_name' },
      { text: 'Avatar', value: 'avatar' }
    ]
  })
}
vue.jsvuexvuetify.js
7
Martin Thompson

Voici ma configuration de travail:

<template>
  <v-data-table
      :total-items="pagination.totalItems"
      :pagination.sync="pagination"
      :items="rows"
      :headers="columns">
      <template slot="headers" slot-scope="props">
        <tr :active="props.selected">
          <th v-for="column in props.headers">
            {{ column.value }}
          </th>
        </tr>
      </template>

    <template slot="items" slot-scope="props">
        <tr>
          <td v-for="cell in props.item.row">
            <v-edit-dialog lazy>
              {{ cell.value }}
              <v-text-field
                :value="cell.value"
                single-line
                counter>
              </v-text-field>
            </v-edit-dialog>
          </td>
        </tr>
      </template>
  </v-data-table>
</template>

<script>
export default {
  data: () => ({
    pagination: {
      page: 1,
      rowsPerPage: 10,
      totalItems: 0
    },

    selected: []
  }),

  computed: {
    columns: {
      get () {
        return this.$store.state.columns
      }
    },

    rows: {
      get () {
        return this.$store.state.rows
      }
    }
  },

  methods: {
    async getRowsHandler () {
      try {
        const {total} = await this.$store.dispatch('getRows', {
          tableIdentifier: this.$route.params.tableIdentifier,
          page: this.pagination.page,
          size: this.pagination.rowsPerPage
        })

        this.pagination.totalItems = total
      } catch (error) {
        // Error
      }
    }
  }
}
</script>

Je n'ai pas tout implémenté. Si vous manquez une partie spécifique, demandez à nouveau et je mettrai à jour mon exemple. Un autre conseil: vous devez éviter watchdeep dans la mesure du possible. Cela peut entraîner de lourds calculs.

8
Julian