[SOLVED] Remove v-on:click event programmatically from an element (VueJs)

Remove v-on:click event programmatically from an element (VueJs)

How do I remove the v-on:click event from a div?

<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>

I tried this in a function called from the VueJS method created when the data is retrieved (from a JsonResult):

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

But it does not work.

Basically, when a user registers his time of entry, the next time he enters the web the button must be deactivated.

Solution

How do I remove the v-on:click event from a div?

An easy way is to only call the event handler if the state is valid.

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

onClickSubmit() will only be executed if valid = true