First, problem introduction

When we dot and click on a page, we are likely to encounter two clicks, and the submit or save button is not verified, so it is very likely to save two copies of data. Therefore, as a developer, it is necessary to verify the need to save similar buttons.

Ii. Problem analysis

We control whether buttons are clicked or not clicked by setting disabled by controlling isDisable. The default isDisable: value is false and the button can be clicked. When we click the button, we first set the button’s binding isDisable to true and then set it to false immediately after 1 second. At this point, the user can not point, after a second of time to operate the button.

SendComment () {this.disabled = true if (this.text == ''){this.$message({type:'error', message:' Input cannot be null ', }) 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 = "",1000)}})}}Copy the code

The above code changes the button property using a timer. After clicking, the button property is set to Disable

The disable attribute of the VUE binding button is :disabled:’ variable name ‘.

Third, summary

  1. Note that the page button should be clicked repeatedly to submit data
  2. The VUE example used here would have been much the same if you were using any other front-end framework