[Vuejs]-Using setAttribute to toggle @click in VueJS

by

0👍

To further elabourate on my comment, it is not possible to directly modify the rendered HTML in that sense, because VueJS actually compiles the template at runtime and the @click attribute is actually parsed as a click event handler internally.

What you should do is to simply include the @click in the template itself, and then when the method is called, you can then add a guard clause in it that will not do anything, if a certain condition is not satisfied, i.e.

<!-- Template -->
<button @click="delete"></button>

…in your JS file:

methods: {
  delete() {
    // Guard clause
    if (condition) {
      return;
    }

    // Otherwise, proceed with deletion
  }
}

The condition will be part of the component data, which you can update dynamically depending on what kind of condition you want to guard against. The default component data will be { condition: false }, and then you simply update this.condition = true when a certain criteria is met, i.e. when eventRender from FullCalendar is called/invoked.

Based on the script you’ve provided, you can add hasCalendarRendered into your component data:

data: () => ({
    hasCalenderRendered: false,
    // Rest of the component data
}),

And then in the eventRender method, you simply flip the boolean:

eventRender(event) {
  this.hasCalendarRendered = true;
}

Then in a delete method:

delete() {
  if (!this.hasCalendarRendered)
    return;

  // Rest of the delete logic
}

Leave a comment