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

이번에는 Vue 버튼을 여러 번 클릭하고 데이터를 반복적으로 제출하는 경우 처리하는 방법을 알려 드리겠습니다. Vue 버튼을 여러 번 클릭하고 데이터를 반복 제출할 때 주의사항은 무엇인가요? 보세요.

실제로는 매우 상세한 문제입니다. 버튼을 조작하면 버튼을 클릭할 때 이벤트를 바인딩합니다.

이벤트는 두 가지 상황으로 나뉩니다.

•첫 번째 유형: 데이터 유형을 작동하지 않습니다

•두 번째 유형: 데이터 유형을 작동합니다

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

구현 원칙: 타이머를 통해 버튼속성을 변경하고 버튼 속성을 비활성화

vue 바인딩 버튼의 비활성화 속성을 클릭한 후: 비활성화됨:'변수 이름'

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!

추천 도서:

JS에서 간단한 계산기를 구현하는 단계에 대한 자세한 설명

React 라우팅 관리 React Router를 사용하는 단계에 대한 자세한 설명

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