How to check if a button is checked in Vue js?

In Vue, you can check if a button is checked using the v-model directive. The v-model directive creates a two-way binding between the input element and the Vue component data property. Here’s an example:

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption">
    <label for="option1">Option 1</label><br>
    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">Option 2</label><br>
    <button @click="checkSelectedOption">Check</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
    };
  },
  methods: {
    checkSelectedOption() {
      if (this.selectedOption === '') {
        console.log('No option selected');
      } else {
        console.log(`Selected option: ${this.selectedOption}`);
      }
    },
  },
};
</script>

In this example, we have two radio buttons and a button. The v-model directive binds the selectedOption data property to the value of the selected radio button. The checkSelectedOption method checks if a radio button is selected by checking the value of the selectedOption data property. If no option is selected, it logs a message to the console. If an option is selected, it logs the selected option to the console.