Vuetify Vuex에서 API의 외부 데이터와 함께 데이터 테이블을 사용합니다.

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' }
    ]
  })
}

작업 설정은 다음과 같습니다.

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

저는 모든 것을 구현하지 않았습니다.특정 부분을 놓치면 다시 물어보고 예시를 업데이트하겠습니다.힌트 하나 더:피해야 한다watch deep가능한 한.그것은 많은 계산을 초래할 수 있다.

이것이 Vuetify v1.5라고 가정할 때 데이터 테이블에 관한 전체 항목에 관한 문서에는 다음과 같이 기술되어 있습니다.

주의: 빈 문자열에 바인딩하거나 검색과 함께 사용하면 예기치 않은 동작이 발생합니다.

테이블에서 '검색' 소품을 제거하면 레코드 수가 다시 표시됩니다.외부 작업을 수행할 경우 기본 검색 기능이 필요하지 않습니다.

언급URL : https://stackoverflow.com/questions/49080814/vuetify-using-datatable-with-external-data-from-an-api-with-vuex