Home Web Front-end JS Tutorial How to handle repeated submission of data when the Vue button is clicked multiple times

How to handle repeated submission of data when the Vue button is clicked multiple times

May 22, 2018 am 11:37 AM
submit Click repeat

This time I will show you how to handle multiple clicks of the vue button and repeated submission of data. What are the precautions for dealing with multiple clicks of the vue button? . Here is a practical case. Let’s take a look. .

This is actually a very detailed issue. If we operate a button, then bind the event when the button is clicked.

Events are divided into two situations:

•The first one: No data type operation

•The second type: Operation data type

<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>
Copy after login

here We control isDisable to set disabled to control whether the button is clickable or unclickable. The default isDisable: value is false and the button can be clicked. When we click this button, first set the button's binding isDisable to true, and immediately set it to false after 1 second. So the user only has one second to operate this button.

The following is an example code for everyone

Button in vue multiple clicks to submit the example code

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
}
})
}
}
Copy after login

implementation Principle: The buttonattribute is changed through the timer. After clicking, the button attribute is set to disable

The disable attribute of the vue-bound button is: disabled:'Variable name'

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to implement a simple calculator in JS

React routing management Detailed explanation of the steps to use React Router

The above is the detailed content of How to handle repeated submission of data when the Vue button is clicked multiple times. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to set multiple timers on iPhone iOS 17 How to set multiple timers on iPhone iOS 17 Sep 18, 2023 am 09:01 AM

In iOS 17, you can set multiple timers on your iPhone using the Clock app, or use Siri to set it hands-free. We discuss both in this article. Let's take a look at them. Set Multiple Timers on iPhone Using the Clock App Open the Clock app on your iPhone and tap the Timers tab in the lower right corner. Now, set the hours, minutes, and seconds. You can use the "Label" and "When does the timer end" options to set a name for the timer and a preferred tone when the timer completes. This will help you differentiate between timers. Once done, click the "Start" button. Then, click the "+" icon in the upper right corner. Now, repeat the above steps to set multiple timers on iPhone. You can also browse

How to set up my business card in Contacts on iPhone [2023] How to set up my business card in Contacts on iPhone [2023] Sep 22, 2023 pm 09:17 PM

With My Business Cards in iOS, you can create a personalized contact card that Siri and other services recognize and associate with you and your phone number. With the introduction of contact posters in iOS17, My Cards becomes very important as it is now used to create your contact posters. If you're eager to get your contact poster up and running, you have to start by setting up My Business Card. We'll walk through how to create a My Business Card and how to make it work smoothly with Siri and your contact poster. How to Set Up My Business Cards in Contacts on iPhone [2023] If you are setting up My Business Cards on your iPhone for the first time, you must do it through the Contacts app only

How to Make a Shopping List in the iOS 17 Reminders App on iPhone How to Make a Shopping List in the iOS 17 Reminders App on iPhone Sep 21, 2023 pm 06:41 PM

How to Make a GroceryList on iPhone in iOS17 Creating a GroceryList in the Reminders app is very simple. You just add a list and populate it with your items. The app automatically sorts your items into categories, and you can even work with your partner or flat partner to make a list of what you need to buy from the store. Here are the full steps to do this: Step 1: Turn on iCloud Reminders As strange as it sounds, Apple says you need to enable reminders from iCloud to create a GroceryList on iOS17. Here are the steps for it: Go to the Settings app on your iPhone and tap [your name]. Next, select i

How to turn off alarms on iPhone [2023] How to turn off alarms on iPhone [2023] Aug 21, 2023 pm 01:25 PM

Since the advent of smartphones, they have undoubtedly replaced alarm clocks. If you own an iPhone, you can use the Clock app to easily set as many alarms for multiple occasions throughout the day. The app lets you configure the alarm time, the tone, how often it repeats, and whether you want to delay them using the Snooze option. If you want to turn off the alarm you have set, the following post should help you disable and delete regular alarms and wake-up alarms on your iPhone. How to Turn Off a Regular Alarm on iPhone By default, when you add an alarm on the Clock app or ask Siri to add an alarm for you, you're actually creating a regular alarm. You can create as many alarm clocks on your iPhone as you like and put them

How to solve the problem of infinite loop of opening web pages in Edge browser How to solve the problem of infinite loop of opening web pages in Edge browser Dec 25, 2023 pm 01:19 PM

Many friends who use the edge browser on win10 have encountered the problem of web pages opening repeatedly, which is a headache. So how to solve it? Let’s take a look at the detailed solutions below. What to do if the edge browser keeps opening web pages repeatedly: 1. Enter the edge browser and click the three dots in the upper right corner. 2. Click "Settings" in the taskbar. 3. Find "Microsoft edge opening method". 4. Click the drop-down menu and select "Start Page". 5. Restart the browser after completion to solve the problem.

MySQL transaction processing: the difference between automatic submission and manual submission MySQL transaction processing: the difference between automatic submission and manual submission Mar 16, 2024 am 11:33 AM

MySQL transaction processing: the difference between automatic submission and manual submission. In the MySQL database, a transaction is a set of SQL statements. Either all executions are successful or all executions fail, ensuring the consistency and integrity of the data. In MySQL, transactions can be divided into automatic submission and manual submission. The difference lies in the timing of transaction submission and the scope of control over the transaction. The following will introduce the difference between automatic submission and manual submission in detail, and give specific code examples to illustrate. 1. Automatically submit in MySQL, if it is not displayed

How to change contact photos on iPhone How to change contact photos on iPhone Jun 08, 2023 pm 03:44 PM

iOS17 is finally here, and it includes a lot of new features. Let's learn how to change contact photos on iPhone in today's tutorial. Apple's recent WWDC 2023 event unveiled a slew of exciting products and upcoming software updates. One of the notable features of iOS 17 is the option to customize your contact photos and posters, providing a unique way to greet others when they receive a call from you on their iPhone. This innovative feature for iOS is designed to make phone calls more personal and user-friendly, allowing you to choose how they appear on the recipient's screen. If you're eager to get your hands on this new feature and greet your loved ones in a personalized way when making calls, here's how to add it to your iPhone

Master the art of using Apple Maps Guides on iPhone and iPad Master the art of using Apple Maps Guides on iPhone and iPad Aug 30, 2023 am 09:25 AM

In an ever-evolving technological world, the ability to navigate digital maps has become an essential skill. This article provides a comprehensive guide on how to use Apple Maps Guides on iPhone and iPad, a feature that revolutionizes the way users explore their surroundings and plan their journeys. Apple Maps is a built-in application on all Apple devices, and it is constantly updated and improved to provide a seamless navigation experience. One of its most notable features is the Guide feature, which provides a curated list of interesting places to visit in various cities around the world. This feature is not only beneficial for travelers, but also a boon for locals looking to discover new attractions in their city. How to use Apple Maps on iOS guide First, visit the Apple Maps

See all articles