how to refresh my vuetable after one operation from __component special field ?

[chenbuer]

here is my __component file(file name is Crud.vue):

<template>
    <div class="custom-actions">
      <button class="ui basic button" @click="delBlog(rowData, rowIndex)"><i class="icon ion-trash-a"></i></button>
    </div>
  </template>

  <script>
  import axios from 'axios'
  export default {
    props: {
      rowData: {
        type: Object,
        required: true
      },
      rowIndex: {
        type: Number
      }
    },
    methods: {
      delBlog(rowData, rowIndex){
        var id=rowData.id;
        axios.get('/admin/blog/'+id+'/del')
        .then(function (response) {
          console.log("del blog"+rowData.title+"SUCCESS");
            this.$refs.vuetable.refresh();//<----------this does not work
        })
        .catch(function (error) {
          console.log(error);
        });
      }
    }
  }
  </script>

and I add this component to index.vue file:

import Crud from './forVueTable/Crud'

Vue.component('custom-actions',Crud)

How should I do to fresh my vuetable ?this.$refs.vuetable.refresh(); this would work in file index.vue and not work in file crud.vue

[chenbuer]

I think this.$parent.refresh(); may solve this problem. from this issue

[cristijora]

@chenbuer There are 2 methods to refresh vue-table

this.$parent.refresh();
this.$parent.reload();

The refresh method sets the current page to 1, which means that if you have pagination, your pagination will always be reset to page 1. On the other hand, reload only fetches data without changes the current page, so I would prefer reload over refresh

@ratiw I saw that refresh is always suggested in issues, although reload would be the desired method in most cases since you want the page to remain the same.

[chenbuer]

@cristijora I perfer reload() also. It's wonderful. Thank you

[ratiw]

@chenbuer I was surprised that using reload is working because the code you provided seems to have problem with using this inside then then block (as you don't use => inside then block).

@cristijora Thanks for helping out. I think this really depend on the context of what you're trying to do. Both refresh and reload have their own use. I think that I might not have emphasize the use of refresh vs reload much in the tutorial. Will try to do that once I can clear out the work that has been occupied at the moment.

[adpace]

I am having a similar problem. I'm using vue cli with webpack to put my components together. I've instantiated a vuetable from the tutorial, and am successfully bringing in the information and displaying it. My goal is to display the first 10 results, then have the ability to show more if a user clicks the show more link. This link triggers a function that changes the per-page variable, then does a refresh. The problem is that when I attempt to update the per-page attribute, it is 1 cycle behind. For example, when I click show more, it should change the amount of results shown from 10 to 20. the next click should send that amount to 30, etc. I can see the value of that variable changing upon the click, but the table does not update on the first click, and on the second click, it does update, but to 20, not 30. I thought it may be a race condition, but I used a setTimeout() and it did not fix the problem. Here is a sample of what my code looks like.

<template>
   <vuetable ref="vuetable"
              api-url="https://vuetable.ratiw.net/api/users"
              :fields="fields"
              :per-page="limitByAmount"
              pagination-path=""
    ></vuetable>
  <div v-if="showMore === true" class="text-center">
          <span class="pointer"
                @click="setFilterLimit()"><i
            class="fa fa-angle-double-down"
            aria-hidden="true"></i> <span style="font-size: 1rem;">Show more</span></span>
    </div>
</template>

<script>
 data () {
      return {
        limitByAmount: 10,
        seeMoreCount : 0,
        showMore     : true
},
    methods   : {
      setFilterLimit  : function () {
        if (this.seeMoreCount === 0) {
          this.limitByAmount += 10//add 10 items to list on 1st click of 'see more'
        } else {
          this.limitByAmount += 25//add 25 items to list on 2nd+ click of 'see more'
        }
        this.seeMoreCount++
        this.$refs.vuetable.reload()
        return this.limitByAmount
      }
</script>

[ratiw]

@adpace It sounds more like you need to wrap the reload call inside $nextTick function.

[HarmlessEvil]

@cristijora, imagine a situation where you have 11 records, 10 records per page and you are on the 2nd page. You're deleting one record then method reload() queries 2nd page again and you'll see "No records matching your query found" even without pagination. So, it's better to avoid it and use refresh(), I think

[ratiw]

In my opinion, this is really an edge case. But if you prefer to handle this, you could add a logic to do a preliminary checking and decide whether you should call reload() or refresh().