I'm encountering a problem with radio buttons in vue 3.
When passing an object from the parent component to the child for data display, I want to set one version as default:
<template>
<table>
...
<tr v-for="(vf, index) in version.files" :key="vf.id">
...
<td>
<input type="radio" name="defaultVersion" v-model="vf.default" :checked="vf.default" @change="onChangeDefault(index)" @click="onClickDefault">
</td>
</tr>
</table>
</template>
props: {
version: Object // received prop object
},
setup(props) {
const {version} = toRefs(props) // making version reactive
let defaultVersionIndex = 0
const onClickDefault = () => {
for(let i = 0; i < version.value.files.length; i++) {
if(version.value.files[i].default) {
defaultVersionIndex = i
}
}
}
const onChangeDefault = (index) => {
let text = "Change default?\nEither OK or Cancel.";
if (confirm(text) == true) {
// make API call upon user confirmation
} else {
version.value.files[index].default = false
version.value.files[defaultVersionIndex].default = true
}
}
return {
version,
onClickDefault,
onChangeDefault
}
}
The issue arises when clicking on a radio button - visually it changes but not reflecting in version.files. What am I missing?
Using radio buttons because only one can be default at a time.
UPDATE 1
Changed input by binding the value to ensure boolean values:
<input type="radio" :value="vf.default" name="defaultVersion" v-model="vf.default" :checked="vf.default" @change="onChangeDefault(index)" @click="onClickDefault">
On cancel action:
version.value.files[index].default = !version.value.files[index].default
version.value.files[defaultVersionIndex].default = !version.value.files[defaultVersionIndex].default
Although values in the object version.files change, the visual update is not working correctly...