beforeUpdate vModelRadio not setting checked on a radio input that has been reset, the created works as expected

[JackedNerd]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNrtV99v2zYQ/ldYPdQy4Fno8pYp2tLCBTqsa5BuAwYIGBTpbLOhSI2kHBuG//d9JCVLXlM36/Y0NA8Gyfvu+N0P3in76Lpp5puWossoNaXmjWWGbNtkueR1o7Rle6ZpyQ5sqVXNJoBOcpnLUkljWW1W7MrJ48mNsiQtLwS7a1ffT6YDCL+2KO1vhWipR1NdcDGZftdjDAn6G0RTdQIIUgNxPGVXGdvnkp3Ynm869UmzVpIm0GVjw4N8R0KoBwc49PY1ffoGiC0Z+1rpGrJKlW0NV+crsgtBbvly96aKJw6zBMazZkeVuTcdu0PcliYhyogvNpbqRhSWsGMsXb/I9nsf08MhTbDzp84k49VVHvUX5FGQuCQx/F0vLenggeVyZVhwVEmmi4orJMRaeDFzQXQAZtfUYaRiQskV1CEzbFKuqbxH4JlVDHFtCyF2XQy91tjgPL3TLOk4pKYGNkt5Fl8HKg4vnVlWeH5NsSJcVlTsQel7sIEVxpdsp1q25DrkOCh5/RlTGsFm9kGFA6g4Cg4VyHvsEoVkHF1ndZomPEOIPRcfoyQEaaCaLjmJCkZ64oJWJKvsRlBhnHXvK0iBMeqQNOqwLzNWk12r6jJNOqXORMU33RIbLhs4ZncNIWU+XnkU8tdZebVWvKQXOJVF7UDdOQ68Xzjxz8Ptv6lVRWLA+AqFoA+741/ckWCoi0duyBbOEOg6zD+m+O05iv6N/VuKuCG7cYa+lOLFOYr/RRBxQfb2oximyZDy0+x39TPcOWpA3bvtkKqxHE+0J6t0gXcIyDu/SJMgP6OBwgT8lqonYEPHA/x3v/hIA2/G8/ysf+Hp94kJO4Tyh1Lw8t6723XReIrb3uOt+m2aBOjTDY0asjd163vKY8YGsmkyetzYoFe6Rff20/VFtthy41vg5q3Lz60rLDxnSCDHe8/SEufYhLY/QqHzh3mgCQ27iknMMBpDIzrM2EYCOQ0QxkjMu04KNaGUocWf6KWxh3fgeaNVY8JQChPD6/1RGMNXEnqYL/76a39AOg53dNCiqhYbzJ6f4BA5qSOE4l2HMpqNZ9ip6RiGfRyhMu3NHcLiMHO/d4TQ0a9NBU/HjqIliyoM6cdcfip1NP0QCfbs6upo8mjpy8OH+ep/Dtinic8kBgCyeloEw6fKa779mv3/TfahiQnu7D8b2Xj+/ElGPkXA6pY+X17u4PgxF80ia1BCS76afzBK4tva23ajpW64IP3Od1+TR5f9rXmETxb18KM/c3f6VHgdR+WR8w9m687y6Ma1Sr1xae9lttBIQhAv3v9MW6yPQkymVgB9Rohmq0TrOAbYy1ZWoD3CebZv/H8IaKe/mMUWdWh6pxzRoaDyCP81vDrj+kD3Yn7RBzk6/AX/jzOm

Steps to reproduce

Set a value via v-model on the input, then reset on form. Then try to set the value again on the input's v-model. The radio button gets checked fine on initial page load, but it does not work after getting reset.

What is expected?

The radio input should have prop checked set to true.

What is actually happening?

Nothing.

System Info

No response

Any additional comments?

It looks to me, like the beforeUdpate condition in vModelRadio needs to have an additional else-if to check if nothing is checked off, but the value matches the v-model value, then set checked prop to true so that the radio button is visibly checked off. I have confirmed the v-model variable has been updated to the expected value that should match the input value.

In my use case I have a form for editing customers, it works on initial page load. Then after resetting it and assigning new customer data to it, it no longer works. The rest of the fields work as expected (selects, inputs etc.)

I posted on discord, but didn't get much of a response, so I thought it was time to report it. Thanks!! :)

[baiwusanyu-c]

The value of v-model has not changed after reset, maybe you need to reset them manually

[wtto00]

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" value="123" />
  </div>
  <div>
    <label for="radio">radio</label>
    <input id="radio" type="radio" name="radio" value="radio" checked onchange="changeRadio(event)" />
    <label for="radio1">radio1</label>
    <input id="radio1" type="radio" name="radio" value="radio1" onchange="changeRadio(event)" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

function changeRadio(e){
    console.log(e)
}

form.reset() will not trigger the onchange event of radio

[edison1105]

you should reset contactValue and selectValue manually.