CFormCheck type="radio" with v-model not updating as expected
joel-rich opened this issue · 12 comments
Radio buttons do not reflect v-model value on load, nor do they properly update v-model when new radio is selected.
To reproduce: set up two radio buttons with values using CFormCheck
//in <template>
<CForm>
<CFormCheck
type="radio"
name="radioExample"
label="Yes"
value="Yes"
v-model="formFields.radio"
/>
<CFormCheck
type="radio"
name="radioExample"
label="No"
value="No"
v-model="formFields.radio"
/>
</CForm>
//in <script setup>
const formFields = reactive({
radio: 'Yes'
})
On page load:
After clicking either "Yes" or "No" radio button
Radio does not change on first click. Sets model value to "true"
Subsequent clicks visually change which radio is selected, but model value stays "true" regardless which one is selected.
It works properly if I don't use CFormCheck
//replace above <template> code with this and it works/updates properly
<input type="radio" id="yes" value="Yes" v-model="formFields.radio" />
<label for="yes">Yes</label>
<br />
<input type="radio" id="no" value="No" v-model="formFields.radio" />
<label for="no">No</label>
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions
Has anyone had a chance to look at this?
Also confirming I've experienced this issue with the radio button component.
It will be fixed in the next release
@mrholek Thanks! I've noticed it's fixed on the latest pre-release version that I grabbed through npm. However, the validation props still aren't working properly for radio buttons (sorry if you're aware and it's on your todo list - just wanted to bring it up in case it wasn't noticed).
Hello @mrholek, i'm really exited to see you fixed the problem when resize windows error, but when i install beta version started this problem with checkboxes. They stop return true when send data from them and now return on wich broke my backend logic. I hope soon will released a stable version with those fixes.
I will fix it in the next release. It should be ready next week.
@mrholek I've checked out 4.10.0, and model binding is working well (thanks!), but the invalid prop still isn't properly reactive. Is a fix for that in the works?
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions
Bump!
@joel-rich can you give me more information about this issue?
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions