Как сбросить данные объектов после нажатия кнопки

Question

Я создаю кнопку, которая загружает больше контента по клику.На данный момент, по нажатию, он меняет текст с «Загрузить еще» на «Загрузка» и отключает кнопку.Но теперь кнопка все еще говорит «Загрузка» и все еще отключена, поэтому я не могу щелкнуть ее снова.

У меня есть внутренний текст кнопки в «данных» моего компонента, но это можетНе лучший путь.

Вот HTML:

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

Вот данные:

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

Вот метод:

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

Я хочу отключить кнопку и показывать «загрузку» только тогда, когда она действительно загружается, чтобы я мог нажимать до тех пор, пока у меня больше не будет доступных страниц.

Answer 1

Предполагая, что вы используете что-то вроде axios, вы должны создать что-то вроде этого

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

Также вам, вероятно, следует переименовать clicked в isLoading.