以编程方式从元素中删除 v-on:click 事件 (VueJs)答案

【问题标题】：Remove v-on:click event programmatically from an element (VueJs)以编程方式从元素中删除 v-on:click 事件 (VueJs)
【发布时间】：2019-06-18 12:37:39
【问题描述】：

如何从 div 中删除 v-on:click 事件？

<div v-on:click="RegistroT(1)" class="btn btn-secondary btn-block" 
         :disabled="HoraIngreso !== '00:00'">
     <i class="fa fa-clock-o"></i> 
     <span id="TxtHoraIngreso" v-text="HoraIngreso"></span>
</div>

当检索数据时（从 JsonResult），我在从 VueJS 方法 created 调用的函数中尝试了这个：

$('#TxtHoraIngreso').parent().addClass(this.HoraIngreso !== '00:00' ? 'disabled' : '');

但它不起作用。

基本上，当用户注册他的进入时间时，他下次进入网络时必须停用该按钮。

【问题讨论】：

disabled 不是divs 的属性，因此设置禁用对您没有任何帮助。您是否尝试过语义，例如使用button?
你必须创建一个带有 setTimeOut 函数的方法。像 setTimeOut(()=> { this.isDisabled = true; }), 3000);并使用动态类绑定vuejs.org/v2/guide/class-and-style.html。例如:class="{ "className": isDisabled }"。还有 1 个建议：不要将 jquery 与 vue/ang/react 等一起使用
我会尝试使用button...我希望它有效

标签： javascript html vue.js vuejs2 jsonresult

【解决方案1】：

如何从 div 中删除 v-on:click 事件？

一种简单的方法是仅在状态有效时调用事件处理程序。

<button
  type="button"
  v-on:click="e => valid && onClickSubmit()"
>
  Sign Up
</button>

onClickSubmit() 只会在valid = true 时执行

【讨论】：

【解决方案2】：

<template>
    <div class="button-wrapper">
        <button class="btn btn-secondary btn-block" :class="{'disabled': isDisabled}" @click="someMethodName"></button>
    </div>
</template>

<script>
export default 
{
    data()
    {
        return {
            isDisabled: false
        }
    },
    methods:
    {
        someMethodName()
        {
            setTimeout(() => {
                this.isDisabled = true;
            }, 3600);
        }
    }
}
</script>

但也许我没有理解你的问题；>

【讨论】：

谢谢，它有效。我在 .js 上使用：this.HoraIngresoDisabled = this.HoraIngreso !== '00:00' ? true : false;。
和<button v-on:click="RegistroT(1)" class="btn btn-secondary btn-block " :class="{'disabled': HoraIngresoDisabled}" :disabled="HoraIngresoDisabled"> <i class="fa fa-clock-o"></i> <span id="TxtHoraIngreso" v-text="HoraIngreso">--:--</span> </button> on .cshtml
@RaulMiranda 太棒了！好好享受！ :)