我无法使用 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
    }