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

Question

我正在创建一个按钮，可以在点击时加载更多内容。目前，单击时，它会将文本从 "Load More" 更改为 "Loading" 并禁用按钮。但是，现在该按钮仍然显示 "Loading" 并且仍处于禁用状态，因此我无法再次单击它。

我的组件 "data" 中有按钮的内部文本，但这可能不是最好的方法。

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

我想禁用按钮并仅在实际加载时才显示 "loading"，这样我就可以点击直到没有更多可用页面。

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。

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

How to reset data objects after button click

javascript

jquery

vue.js

reset