vue 버튼을 여러 번 클릭할 때 반복되는 데이터 제출을 처리하는 방법

이번에는 vue 버튼을 여러 번 클릭하여 데이터를 반복 제출하는 방법과 vue 버튼을 여러 번 클릭하여 데이터를 반복 제출하는 경우의 Notes에 대해 설명하겠습니다. 아래는 실제 사례입니다. 보세요.

Events는 두 가지 상황으로 나뉩니다.

•첫 번째: 데이터 작업 없음 유형

•두 번째: 작업 데이터 유형

<template>
 <button @click="submit()" :disabled="isDisable">点击</button>
</template>
<script>
 export default {
  name: 'TestButton',
  data: function () {
   return {
    isDisable: false
   }
  },
  methods: {
   submit() {
    this.isDisable = true
    setTimeout(() => {
     this.isDisable = false
    }, 1000)
   }
  },
 }
</script>

여기서 isDisable을 제어하여 버튼을 클릭할 수 있는지 여부를 제어하여 비활성화되도록 설정했습니다. 아닙니다. 기본 isDisable: 값은 false이며 버튼을 클릭할 수 있습니다. 이 버튼을 클릭하면 먼저 버튼의 바인딩 isDisable을 true로 설정하고 1초 후에 즉시 false로 설정합니다. 따라서 사용자는 이 버튼을 작동하는 데 1초밖에 걸리지 않습니다.

다음은 모두를 위한 예제 코드입니다

vue의 버튼을 반복 제출 예제 코드를 여러 번 클릭하세요

sendComment () {
this.disabled = true
if (this.text == ''){
this.$message({
type:'error',
message:'输入内容不能为空',
})
this.disabled = false
}else{
this.$post('/xx/xx/IdleGoodsComment',{
goods_id:this.$route.params.id,
content:this.text,
user_id:window.uId,
type:1
}).then((res) => {
if(res){
this.getDetail()
setTimeout(()=>{
this.disabled=false
this.getCommentList()
this.text = ''}
,2000)
this.disabled = true
}
})
}
}

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트 기사에서 다른 관련 주제에 주목해 주세요!

추천 자료:

Angular 경로에서 경로 가드를 사용하는 방법

React 경로 점프 방법 요약

위 내용은 vue 버튼을 여러 번 클릭할 때 반복되는 데이터 제출을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!