QUESTION: How do I v-model to a group of radio buttons?

[camdecoster]

I'm using the CFormCheck component to allow the user to select an option, but I can't figure out how to get the value of the selected button back to my state variable. Should I be setting the model-value attribute? If so, how does that work? Every time I try to set it, the attribute takes on the value true no matter what value I pass in. Is there an example on the documentation site? Thank you.

Example:

<CFormCheck
  id="inlineCheckbox1"
  v-model="cloudSave"
  inline
  type="radio"
  name="inlineRadioOptions"
  label="Local"
  model-value="cloudSave"
/>

[camdecoster]

I think the issue has to do with this line and this line. When the change event happens, the checked status is returned via the 'update:modelValue' event. Eventually, the checked status will be true and won't change because the value returned by the event will always be true (because the current button state is true).

[sametsafak]

I hope form components themselves and the docs will be updated. I am getting radios' value with an ugly trick like the below about this issue. I hope it helps.

<CFormCheck
  type="radio"
  name="my-radio"
  id="radio1"
  label="Radio 1"
  value="1"
  :checked="radioModel === '1'"
  @click="radioModel = $event.target.value"
/>
<CFormCheck
  type="radio"
  name="my-radio"
  id="radio2"
  label="Radio 2"
  value="2"
  :checked="radioModel === '2'"
  @click="radioModel = $event.target.value"
/>

[JediKnightChan]

Well imagine 10 years passed but radios are not working with vue normally still.