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

另外，您可能应该将单击的名称重命名为isLoading。

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

1 个答案: