Set initial state of radio component in Vue.js
How to set the initial state of a re-useable radio component in Vue.js.
I spent way too long trying to figure this one out. The problem occurred when I was using a radio group component from TailwindUI. I copied the component and then converted it to a reuseable vue component. This allowed me to use v-model on the component in the parent.
In theory I should have been able to set the initial state of the component in the parent, by setting the initial value of the v-model to one of the available options for the radio group. The problem is this does not set the initial value. And this is because Tailwind UI uses Headless UI for the radio group. And when you use objects as values you need to add an extra attribute to the RadioGroup component.
Once you know this though, everything works as expected. What a nightmare though.
Check out my website: https://codingoblin.com