Question

vue.js怎样解决按钮多次点击重复提交

如图我需要将这个按钮在点击一次后暂时置灰，应该怎么改，最好可以直接贴代码





Answer 1

建议使用ref，给button添加注册ref引用，然后在表单提交的时候，获取button按钮，使其disable置灰。

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。

<div id="app">
  <button ref="mybutton" type="primary" @click="save">保存</button>
</div>

<script>
new Vue({
  el: "#app",
  data: {
  },
  methods: {
  	save() {
    	this.$refs.mybutton.disabled = true;
    }
  }
})
</script>
<style>
:disabled{   
    border: 1px solid #DDD;   
    background-color: #F5F5F5;   
    color:#ACA899;   
}  
</style>

Answer 2

设置标志性变量为ture，如 isAbled，然后在按钮初次点击后设为false，在提交请求返回后设为true，然后该变量可以在button的disable属性上使用，也可以自定义按钮，用于动态控制class，同时在点击事件回调里面进行相关判断拦截

Answer 3

<div id="app">
  <button :disabled="disabled" type="primary" @click="save">保存</button>
</div>

new Vue({
  el: "#app",
  data: {
  disabled: false
  },
  methods: {
      save() {
        this.disabled = true;
        ajax().then(()=>{
            this.disabled = false;
        },()=>{
            this.disabled = false;
        })
    }
  }
})