Vue.js 에서 처리중일때는 해당 버튼 무효화 하기(두번 이상의 클릭을 했을때, 한번의 서비스만 처리하기 위해)

disabled 이용

<button v-bind:disabled="isProcessing" @click="submit">何かしら処理する</button>

mixins/index.js

export default {
  data() {
    return {
      processing: false
    }
  },
  methods: {
    startProcessing: function () {
      this.processing = true
    },
    endProcessing: function () {
      this.processing = false
    },
    isProcessing: function () {
      return this.processing
    }
  }
}

컴포넌트(적용하고 싶은).vue

<template>
  <div>
    <button v-bind:disabled="isProcessing()" @click="submit">何かしら処理する</button>
    <p>※押すと2秒間ロックされます</p>
  </div>
</template>

<script>
import Processing from '@/mixins/index.js'

export default {
  mixins: [Processing],
  name: 'articleRegister',
  methods: {
    submit: function () {
      // ボタンのロックを開始する
      this.startProcessing()

      // 何かしらの処理...

      // 2秒待つのは、Ajaxなどの処理を擬似的に表現しています
      setTimeout(function () {
      
        this.endProcessing() // ボタンのロックを解除する
      }.bind(this), 2000)
    }
  }
}
</script>