action checkbox selected vue js

<template>
  <div>
    <input type="checkbox" v-model="isChecked" @change="handleCheckboxChange"> Check me
    <p>Checkbox is checked: {{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  },
  methods: {
    handleCheckboxChange() {
      console.log('Checkbox changed');
    }
  }
};
</script>

Explanation:

• The <input> tag creates a checkbox.
• v-model="isChecked" binds the checkbox state to the isChecked data property. It ensures that the checkbox state reflects the value of isChecked and vice versa.
• @change="handleCheckboxChange" listens for the change event on the checkbox and triggers the handleCheckboxChange method when the checkbox state changes.
• Inside the <script> tag:
• The data() function returns an object containing the isChecked property initialized with a value of false.
• The handleCheckboxChange() method logs a message to the console when the checkbox state changes.
• The {{ isChecked }} expression in the paragraph tag displays the current value of isChecked, showing whether the checkbox is checked or not.