web-dev-qa-db-ja.com

Vuetify Vuexを使用したAPIの外部データでのデータテーブルの使用

Vuexでvuetifyフレームワークを使用したいのですが、Vuexで使用するためのドキュメントは限られています。

したい：

  • 外部APIからデータを取得します（ただし、必要なデータのみ）
  • 次に、データを状態で保存し、編集などを行います
  • 次に、変更をAPIにプッシュバックします

Vuetifyを使用して、外部のページネーションとソートの例をいくつか試しましたが、ハードコーディングしない限り、すべてのレコード数を表示することはできません。

私はVueとVuetifyにかなり慣れていないので、何かを誤解しているかもしれません。

<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

これは私の作業セットアップです：

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

すべてを実装したわけではありません。特定の部分を見逃した場合は、もう一度質問してください。例を更新します。もう1つのヒント：watchdeepは可能な限り避けてください。計算が多くなる可能性があります。

8
Julian