vue ＠click 异步抓资料, 会重复get到资料

Question

状况：想要在button点击的时候, 异步刷新当屏数据, 慢慢按都没问题, 但当我连续快速点击时, 资料就会造成重复get的状况
所以打算在table还未渲染完成时,
disable这个button, 完成时开放点击, 避免发生一样的问题

直接上代码

methods: {
        getGame () {
            return this.$http.get(api.game_list).then(response => {
                let games = response.data
                let gameIds = []
                games.forEach(game => {
                    gameIds.push(game.id)
                })
                return gameIds
            }, response => {
                this.errorCallback(response)
            })
        },
        getInfo (gameId) {
            this.$http.get(api.game_draw + `?game=${gameId}`).then(
                response => {
                    let Info = response.data[0]
                    Info.id = gameId
                    this.game_Infos.push(Info)
                },
                response => {
                    this.errorCallback(response)
                }
            )
        },
        errorCallback (response) {
            if (('' + response.status).indexOf('4') === 0) {
                this.$router.push('/login?next=' + this.$route.path)
            }
        },
        getLatest () {
            this.game_Infos = []
            if (this.disabled === true) {
                return
            }
            this.disabled = true
            this.getGame().then(gameIds => {
                gameIds.forEach(gameId => {
                    this.getInfo(gameId)
                })
                this.disabled = false
            })
        }
    },
        // 这样虽然可以让按钮disabled但连续点时还是有多笔相同资料

<button class="md-btn w-sm blue" @click="getLatest()" :disabled="disabled">refresh</button>```

Answer 1

直接再写一份按钮。不加事件的即可。点击了换成没有事件的。拉取数据之后，再换成有点击事件的按钮。
disabled有时会有问题，加上这属性，不管内容是什么，都有效。

Answer 2

你可以参考iview上面的Button组件，增加一个loading状态，在获取数据成功回调里面取消loading