我无法通过 vueJS 2 的引导分页获取表的数据

Question

我想在我的 api 中使用过滤数据的表格上的分页显示。当我将函数放入方法中时，我从 (event-1) 中获取数据，但是当我将项的函数放入计算中时，我得到的不是数据数组而是对象。所以，我的数据无法显示。请问如何获取数据？

<input type="text" class="form-control search ml-4 mb-4" placeholder="search" v-model="filterNameInput" :onChange="filterByName">

<b-table hover responsive="sm" :busy.sync="isBusy" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" :items="fetchPlaces" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClickHandler">

  <template slot="created" slot-scope="data">
    {{ data.item.created | moment().format("YYYY-MM-DD") }}
  </template>
  <template slot="updated" slot-scope="data">
    {{ data.item.updated | moment().format("YYYY-MM-DD") }}
  </template>
  <template slot="categories" slot-scope="data">
    <b-badge v-for="category in data.item.categories" :key="category.id" variant="primary">{{category.name}}</b-badge>
  </template>

</b-table>

computed: {
  fetchPlaces(ctx) {
    let params = '?apikey=apiKey&lng=en&page=' + ctx.currentPage + '&limit=' + ctx.perPage
    if (this.sortBy) {
      params += '&sort=' + this.sortBy
      if (this.sortDesc) {
        params += '&dir=DESC'
      }
    }
    if (this.filterStatus !== '' || this.filterNameInput !== '') {
      params += '&sort=name&dir=ASC'
      if (this.filterStatus !== '') {
        params += '&filter[status]=like|' + this.filterStatus
      }
      console.log(this.filterNameInput)
      if (this.filterNameInput !== '') {
        params += '&filter[name]=%like%|' + this.filterNameInput
      }
    }
    let promise = this.$http.get(apiUrl + params)

    return promise.then((data) => {
      let items = data.body.data
      this.totalRows = data.body.totalItems
      return (items || [])
    })
  }
}

Answer 1

您的计算返回一个Promise，而不是一个值。此外，计算（以它们的简单形式）就像 getter，它们不接受参数。

进行异步计算的正确位置是在观察者中：

• 创建一个计算 params 的计算函数（每次 params 的“部分”发生变化时都会重新计算）。
• 为params 创建一个观察者以使用新的params 触发API 调用并更新数据字段fetchPlaces
• 在模板中使用fetchPlaces，API调用返回时会自动异步更新。

这是建议的结果代码：

<b-table ... :items="fetchPlaces" ... >

data() {
  // properties used somewhere in the code below (types may differ)
  apiUrl: 'http://api.example.com',
  currentPage: 1,
  perPage: 1,
  sortBy: 'somefield',
  sortDesc: false,
  filterStatus: 1,
  filterNameInput: 'someinput',
  totalRows: 0,
  fetchPlaces: [],
},
computed: {
  params() {
    let params = '?apikey=apiKey&lng=en&page=' + this.currentPage + '&limit=' + this.perPage
    if (this.sortBy) {
      params += '&sort=' + this.sortBy
      if (this.sortDesc) {
        params += '&dir=DESC'
      }
    }
    if (this.filterStatus !== '' || this.filterNameInput !== '') {
      params += '&sort=name&dir=ASC'
      if (this.filterStatus !== '') {
        params += '&filter[status]=like|' + this.filterStatus
      }
      console.log(this.filterNameInput)
      if (this.filterNameInput !== '') {
        params += '&filter[name]=%like%|' + this.filterNameInput
      }
    }
    return params;
  }
},
watch: {
  params(newParams, oldParams) {
    this.updateFetchPlaces(newParams);
  }
},
methods: {
  updateFetchPlaces(newParams) {
    this.$http.get(this.apiUrl + newParams).then((data) => {
      let items = data.body.data

      this.totalRows = data.body.totalItems
      this.fetchPlaces = items || [];
    });
  }
},
created() {
  this.updateFetchPlaces(this.params); // initial fetch
}

Answer 2

             <v-select class="my-4 dropdownHashgroup" v-model="filterStatus" :onChange="statusOnChange" :options="placeStatus" label="label" placeholder="Status"></v-select>
             <input type="text" class="form-control search ml-4 mb-4" placeholder="search" v-model="filterNameInput" :onChange="filterByName">

             <b-table hover responsive="sm" :busy.sync="isBusy" :sort-by.sync="sortBy"
                             :sort-desc.sync="sortDesc" :items="fetchPlaces" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClickHandler">
                          </b-table>
        import vSelect from 'vue-select'

          export default {
            name: 'grid-places',
            data: () => {
              return {
                apiUrl: 'apiUrl',
                apiKey: 'apiKey',
                isBusy: false,
                fields: [
                  { key: 'name', sortable: true },
                  { key: 'created', sortable: true },
                  { key: 'updated', sortable: true },
                  { key: 'score' },
                  { key: 'categories' }
                ],
                currentPage: 1,
                perPage: 10,
                totalRows: 0,
                sortBy: 'name',
                sortDesc: false,
                placeStatus: ['DRAFT', 'PUBLISHED', 'DISABLED'],
                filterStatus: 'PUBLISHED',
                filterNameInput: '',
                fetchPlaces: []
              }
            },
        methods: {
              updateFetchPlaces (newParams) {
                this.$http.get(this.apiUrl + newParams).then((data) => {
                  let items = data.body.data
                  this.totalRows = data.body.totalItems
                  this.fetchPlaces = items || []
                })
              },
            },
        computed: {
           params () {
            let params = '?apikey=' + this.apiKey + '&lng=en&page=' + this.currentPage + '&limit=' + this.perPage
            if (this.sortBy) {
              params += '&sort=' + this.sortBy
              if (this.sortDesc) {
                params += '&dir=DESC'
              }
            }
            if (this.filterStatus !== '' || this.filterNameInput !== '') {
              params += '&sort=name&dir=ASC'
            }
            if (this.filterStatus !== '' && this.filterNameInput === '') {
              params += '&filter[status]=like|' + this.filterStatus
            }
            if (this.filterNameInput !== '' && this.filterStatus === '') {
              params += '&filter[name]=%like%|' + this.filterNameInput
            }
            return params
          },
          statusOnChange () {
          },
          filterByName () {
          }
    },
    watch: {
      params (newParams, oldParams) {
        console.log('going to fetch for:', newParams)
        this.$http.get(this.apiUrl + newParams).then((data) => {
          let items = data.body.data
          this.totalRows = data.body.totalItems
          this.fetchPlaces = items || []
          console.log(this.fetchPlaces)
          console.log(this.currentPage)
        })
      }
    },
    created () {
      this.updateFetchPlaces(this.params)
    },
    components: {
      vSelect
    }