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，而不是值。此外，计算机（以简单形式）就像吸气剂一样，它们不带参数。

进行异步计算的适当位置在于观察者：

创建一个计算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(oldParams, newParams) {
    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

<manifest xmlns:android=…..
    <supports-screens android:largeScreens="true" android:xlargeScreens="true" />
etc

我无法使用vueJS 2的bootstrap分页获取我的表的数据

2 个答案: