How to reset data objects after button click

Question

I am creating a button that loads more content on click. At the moment, on click, it changes the text from "Load More" to "Loading" and disables the button. But, now the button still says "Loading" and is still disabled, so I can't click it again.

I have the inner text of the button in the "data" of my component, but that may not be the best way.

Here is the HTML:

      <Button
        v-if="allowLoadMore && morePagesAvailable"
        :loading="loading"
        :disabled="clicked"
        @click="loadMore"
      >
        {{ loadMoreText }}
      </Button>

Here is the data:

  data () {
    return {
      page: 1,
      morePagesAvailable: false,
      loadMoreText: 'Load More',
      clicked: false
    }

Here is the method:

  methods: {
    loadMore () {
      if (this.morePagesAvailable) {
        this.page += 1
        ...
        this.loadMoreText = 'Loading'
        this.clicked = true
        return this.loadMoreText
      }
    }
  }

I want to disable the button and show "loading" only when it is actually loading, so that I can click until I have no more pages available.

You'd need to hook in when the new page has loaded but you haven't included any of that code so it's difficult to give a concrete example. — skirtle, Jun 29 '19 at 03:10

score 0 · Accepted Answer · answered Jun 29 '19 at 04:57

0

Assuming you use something like axios, you should create something like this

loadMore () {
      if (this.morePagesAvailable) {
        this.page += 1
        ...
        this.loadMoreText = 'Loading'
        this.clicked = true
        Axios.get(...).then( resp => {
              //use the resp
              this.clicked = false
       }) 
        return this.loadMoreText
      }
    }

Also you should probably rename clicked to isLoading.

answered Jun 29 '19 at 04:57

blackening

903
6
14

I am not using Axios. How could I do it without Axios? – Angello L. Jul 01 '19 at 13:07
However you load your data is fine. – blackening Jul 01 '19 at 16:51

How to reset data objects after button click

1 Answers1