单击按钮后如何重置数据对象

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。