Radio with slot not updating v-model

[sametsafak]

Hi,

When I try to use standard radio inputs with a v-model, it seems that the v-model doesn't get updated and its default value seems doesn't get applied.

I want to use a custom implementation with slot like below, not with a v-field component.

I tried it with handleChange and @change event but couldn't make it work.

Am I missing something?

I am using vee-validate 4.5.11 with yup schema and all other input's are woking very well.

Thank you

<Field
  name="standardRadioModel"
  type="radio"
  v-slot="{ field, errors, handleChange, meta }"
  :value="null"
>
  <div>
    <input
      type="radio"
      name="standardRadioModel"
      value="HTML"
      id="html"
      v-bind="field"
    />
    <label for="html">
      HTML
    </label>
  </div>
  <div>
    <input
      type="radio"
      name="standardRadioModel"
      value="CSS"
      id="css"
      v-bind="field"
    />
    <label for="css"> CSS </label>
  </div>
</Field>

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Demo link

https://codesandbox.io/s/custom-text-input-with-vee-validate-v4-forked-c93iz0?file=/src/App.vue

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Have you tried using v-model on the Field component itself?

      <Field
        name="standardRadioModel"
        type="radio"
        v-model="standardRadioModel"
        v-slot="{ field, errors, meta }"
      >
....
</Field>

I've updated the example here:

https://codesandbox.io/s/custom-text-input-with-vee-validate-v4-forked-3p9rfs?file=/src/App.vue:138-291

P.S: I moved this to discussions since I do not think this is a bug or an issue.

[sametsafak]

Yes, It worked like a charm!
Maybe this can be added to the documentation's Checkbox and Radio Inputs section also to help other developers.

Thank you!