[Vuejs]-I can't get data of my table with bootstrap pagination with vueJS 2

by

0👍

✅

Your computed is returning a Promise, not a value. Also, computeds (in their simple form) are like getters, they don’t take arguments.

The proper place to make asynchronous computations is in watchers:

  • Create a computed that calculates params (which will recalculate every time a "part" of params changes).
  • Create a watcher for params to trigger the API call with the new params and update the data field fetchPlaces
  • Use fetchPlaces in the template, which will be updated asynchronously automatically when the API call returns.

Here’s the suggested resulting code:

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

0👍

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

Leave a comment