Within the code snippet below, there are two radio buttons present. Initially, both of them are unchecked. When the first radio button is checked, the log message in change_() function prints "male". On the other hand, when the second radio button is checked, the log message in change_() function prints "female". I have the following inquiries:
1. Is it possible to change the checkability state of a radio button through the :unchecked property? In other words, when the radio button is unchecked, I attempted to change the value of check1 for example to be male, female or any other literal value, but that did not trigger any change in the checkability state of the radio button. Is it feasible to modify the checkability state of a radio button via the :unchecked property?
2. If this is not achievable, then what is the purpose of :unchecked and checked properties? Are they solely meant to set an initial check state for the radio button?
3. Since the radio buttons are initially unchecked, when I check them, the interpolation values of either check1 or check2 are not displayed. I anticipated that switching the radio button from unchecked to checked state would cause the interpolated text between {{}} to also change, but that does not occur.
App.vue:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<input type="radio" :unchecked="check1" @change="(event)=>change_(event)" :value="male" />
<input type="radio" :unchecked="check2" @change="(event)=>change_(event)" :value="female" />
<div>selected radio1: {{ check1 }}</div>
<div>selected radio2: {{ check2 }}</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<script setup>
const check1 = ref('')
const check2 = ref('')
const male = ref('male')
const female = ref('female')
function change(params) {
console.log("change_:",params.target.value);
}
</script>