vue radio checked if

Certainly! Below is an example of how you can use the v-model directive in Vue.js to create a radio button group and check a specific option based on a condition:

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

    <input type="radio" id="option3" value="option3" v-model="selectedOption">
    <label for="option3">Option 3</label><br>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '' // This will hold the selected option
    };
  },
  mounted() {
    // Logic to check a specific option based on a condition
    if (/ Your condition /) {
      this.selectedOption = 'option2'; // Set 'option2' as the checked option
    }
  }
};
</script>

Explanation: - The <input> elements represent the radio buttons with different values and are bound to the selectedOption data property using the v-model directive. - The v-model directive ensures that the selectedOption data property reflects the value of the selected radio button. - The mounted() lifecycle hook is used to perform actions after the component is mounted to the DOM. - Inside mounted(), you can place your conditional logic to set the value of selectedOption based on your specific condition. In the example, if the condition is met, 'option2' will be set as the checked option. Adjust the condition and the value assignment according to your requirements.