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

如图我需要将这个按钮在点击一次后暂时置灰,应该怎么改,最好可以直接贴代码... 如图我需要将这个按钮在点击一次后暂时置灰,应该怎么改,最好可以直接贴代码 展开
 我来答
百度网友2acf15a
2019-01-29 · TA获得超过1534个赞
知道小有建树答主
回答量:1123
采纳率:81%
帮助的人:268万
展开全部

建议使用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>
百度网友0524975
2019-01-30
知道答主
回答量:5
采纳率:0%
帮助的人:3746
展开全部
设置标志性变量为ture,如 isAbled,然后在按钮初次点击后设为false,在提交请求返回后设为true,然后该变量可以在button的disable属性上使用,也可以自定义按钮,用于动态控制class,同时在点击事件回调里面进行相关判断拦截
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
神奇的嗢石兰
2019-01-30 · 超过19用户采纳过TA的回答
知道答主
回答量:57
采纳率:33%
帮助的人:18.6万
展开全部
<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;
        })
    }
  }
})
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式