[Vuejs]-Vue onEnable/onDisable event

by

0👍

i would recommend watchers you can bind a variable/computed to :disabled of the checkbox and watch the value changing

exp.

<template>
  <div>
    <p>{{ checkboxState }}</p>
    <input type="checkbox" :disabled="checkboxState" />
    <button @click="checkboxChanged()">Disable Checkbox!</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => {
    return {
      checkboxState: true,
    };
  },
  methods: {
    checkboxChanged() {
      this.checkboxState = !this.checkboxState;
    },
  },
  watch: {
    checkboxState() {
      // this is fired when the checkboxState changes
      console.log("fired when checkboxState changes");
    },
  },
};
</script>

note: the function name and the variable must have the same name for watchers to work.

Like this Sandbox

Leave a comment