이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!