Radio input element's checked value not synced with props checked.

xuyimingwork commented 6 months ago

Vue version

3.4.27

Link to minimal reproduction

https://play.vuejs.org/#eNqVVGFr2zAQ/SuHv8QB1yHZYBCSsq2UrRs0ZSvsQ2yGap8TdbZkZNlNCfnvO0mWm5AR2IcQ6b13p3enk/fBp7qOuxaDebBoMsVrDQ3qtoaSic0yCXSTBNeJ4FUtlYY9KCwieGE628IBCiUrGFH0KBGJyKRoNHSsbBGWRhiOKHmJo7HnZK05LXp2nQiAXhKB3dxsUanXfjeZwOiLYrVnzX6lyNYx8IBMHW1/MY2qwlIKspTSwYmwZkNrK4JQRCDHsLyGfR+y+g6soCDQvELZ6h6mJjw6IAytvnlh9cr5d0kouVXerx5NEnKOBjnTJeJgfRStyAx8ouimc2DiNYJuZhdj58u0S5YYl3ITjhrNqPUmynQSfBdj32nDhIYAWMdxfEKnkSNOwLjgIr8TOe5CrrEy1bn/5RK66fi/Q2bWlin0rM6QKWULW6cRcCpWtNUTKlpTvW7dl7wm5ZrPSGYX0zSl0hw49eAsTY1U0YAqYaD+yH66RLY100Fx1uTbNZ+0c8s325J+GrSkybFKI3J1+qYa2GZfTNyzoEdAG0LrkmaMdgCLnHfX/U3OYb8f5vtwWEwMN4horrM/mFuRO+FM8nWwRZ3GHTRb2ZY5POFx5ovXYPKOTxNzUbuJpvKuCqnoQVs9Fz5jEjhav9ZIrGI5lx6bZ862jxpO8QLBKhPEnrIhJGeaXVlRH+WZj+5yCPX35C7J8RPr13T7qMNBRJ8furuCb+LnRgr6RtnrTIJMVjUvUfXNTwJqkjuG3JSlfPlmMa3ozXvcFvMP/LnZGSwJHhQ2qDqqbuDo5W1QO/r25z3uaD2QlczbktQXyB9Ic9caj072uRU52T7SWbd39uvKxeaxud1pFI0vyhg1yoPVJwF9am8ulP5m91383sbRCFMXf3eoTE5qIBHx7ENw+AvKk/a9

Steps to reproduce

open reproduction link
click second radio input

What is expected?

the second radio should not been checked

What is actually happening?

the second radio checked => not match the value & element's prop.checked

System Info

No response

Any additional comments?

This will cause the second radio can't trigger change event, since the real element checked is true but data value is not, which is not we want.

Issue below is trigger by this problem: https://github.com/element-plus/element-plus/issues/16497

Shyam-Chen commented 6 months ago

https://eslint.vuejs.org/rules/require-v-for-key.html

xuyimingwork commented 6 months ago

https://eslint.vuejs.org/rules/require-v-for-key.html

https://play.vuejs.org/#eNqlVW1r2zAQ/iuHv8QBz5mzwSAkZVspWzdoylbYh9gM1VYSdbJkZNlNCfnvu5PsNKajbOuHEOm5507PvUjeBx+qKm4bHsyCeZ0bUVmouW0qkExtFmlg6zQ4S5UoK20s7MHwdQT3zOZbOMDa6BJG6D1KVapyrWoLLZMNhwURwxEGl3w07m26sgIXnXWVKoCOEoHbnG+5MQ/dbjKB0SfDqt5K+6VBWafANWfmZPuDWW5KLrVCSRkenConNnSyIghVBHoMizPYdy7Lr8DW6ARWlFw3toOxCDceCEPHr+9ZtfT6fRAM7phXyxsKgso5IU94qTo4HetG5QQPGG0yA6YeIminbjH2uqhcWvJY6k04qi3D0pMXVRL6KsZ9pckSkgFgFcfxwJxF3jAA47VQxaUq+C4UlpeUnf9fLKBNxv/sMnWyKNEneYbMGJfYKotAYLKqKW+5wTXm69ddyitkrsQUaW6RZBmm5sGkB6dZRlSDA2oUQd2R3XSpfEvTgX5O5GObB+Xcis1W4s+C1Tg5jkkkn2dfVIJd9PnEXwu8BLhBtJI4Y7gDmBeiPes6OYP9/jjfh8N8QrYjCec6/8ULR/InPKF8PsrCSvMd1FvdyAJu+WnkZ9tAccfDwEJVfqIB7EPF8T4bVgidBh6b5V4X4t0Bq9dY9j5YT1OsJFd2mx8dC2bZK0ca+Pb2974TZOuaEj6Sxp41+V+JyQskJn8jMRlKpBk46XsQ4aOIE7UWm/iu1gpfTjdkaZDrshKSm24k0gBb5w9DZVLq+y8OswZfoh536f0Bv6t3hKXBteE1Ny1merThe7Dh1psvvl/xHa6PxlIXjUT2M8ZvHG9DQxo97WOjCpR9wnNqL92bL9Tmpr7YWa7qPikSSsyD46cBfgDOn0n9Ue6b+K3zw4uFVfzZckMxsYBoiKfvgsNvOgonvA==

@Shyam-Chen Still exist when not using v-for.

I know we can use key to force refresh element, but using key is recommend rule not forced rule. Not using key should only effect app's performance then wrong display.

The original trigger of this problem is https://github.com/element-plus/element-plus/issues/16497, the v-for is inside component and using index for v-for's key to render a radio list.

Component user only need pass array to component, and in his use case cause wrong display.

Shyam-Chen commented 6 months ago

For workarounds:

watch(
  value,
  (newVal, oldVal) => {
    swapOptions(newVal, oldVal);
  },
  { flush: "post" },
);

Or use v-model:

https://play.vuejs.org/#eNqtVM2O0zAQfpWRT6kUUlo4laYSrFZiOQACbnEOaeK2XhI78k/aKsq7M7aTbqtFi4T2EGlmvm9+PZOefGzbpLOMrMhal4q3BupC7FNKjKYENDO23VDBm1YqAz0otovhWJjyAAPslGyAEnSn5AMVVJRSaANdUVsGqeNG1CWoEZ8hIcCyNRyFkZBdGDGGujswpc6U5I5OhU8U+XgxRCIGOYN0Az0VAPpYtN9CqICgxxDcdlaUDrjhdIsVFOIcQ7f0wiyEGatJpqKdS+QAgCxJkhs4jwNwY0x2XFQPomKnKOKGNb5CJ0CaptAtZv/htAxOvqVnDUWFUr6DLI+BY1fCNlumUMbGgjz2liEz40ukeWGR59hgMC4m4zLPMQvgWxirhLOFpOt5WAd8fFSwsrYuDEMNYF3xbjOOdQV9f3nRYVjPHXYh4XOWv1nlSWHAzyhhOJ/5/lDjZwDnwk6gD9LWFWzZdfx/DM3Fn2ECH/opCRetxZ1808iK1bjXnoerbc4tQ1UVFZeoiqJxarEtUVl5Eqpj5uxtjtb5KwZcTAHX86vZkhjPDq9kx/fJo5YCr9I/JCWlbFpeMzWOnRIcTBgdpqhrefzibUbhpUz20k3/L/ZHfXI2Sr4rppnq3O1NmCnUnpkA3//8yk4oX0Ds2LpLfQH8wbSsrasx0D5ZUWHZVzxf7YP/n3Cx/6XvT4YJPTXlCnXMwfP9v+Xuhdafyn2XvPd+uLxk+APOsp0S

Shyam-Chen commented 6 months ago

https://deploy-preview-10989--vue-sfc-playground.netlify.app/#eNqlVd9v0zAQ/ldOeWkqhZQUnqp2AqYJBtI6wSQemjx4idt6OHbkOFmnqv87d3bSNRqqgD1Utb/77vzdDzv74GNVxW3Dg1kwr3MjKgs1t00FkqnNIg1snQYXqRJlpY2FPRi+juCR2XwLB1gbXcIIvUepSlWuVW2hZbLhsCBiOMLgko/GvU1XVuCis65SBdBRInCbyy035qnbTSYw+mxY1VtpvzQo6xS45cycbH8yy03JpVYoKcODU+XEhk5WBKGKQI9hcQH7zmX5DdgancCKkuvGdjAW4c4DYej49SOrll6/D4LBHfNmeUdBUDkn5AUvVQenY92onOABo01mwNRTBO3ULcZeF5VLSx5LvQlHtWVYevKiSkJfxbivNFlCMgCs4jgemLPIGwZgvBaquFYF34XC8pKy8/+LBbTJ+J9dpk4WJfoiz5AZ4xJbZREITFY15T03uMZ8/bpLeYXMlZgizS2SLMPUPJj04DTLiGpwQI0iqDuymy6Vb2k60M+JfG7zoJxbsdlK/FmwGifHMYnk8+yLSrCLPp/4a4GXADeIVhJnDHcA80K0F10nZ7DfH+f7cJhPyHYk4Vznv3jhSP6EF5QvR1lYab6DeqsbWcA9P418tg0UdzwMLFTlJxrAPlUc77NhhdBp4LFZ7nUh3h2weotl74P1NMVKcmX3+dGxYJa9caSBb2//4DtBtq4p4TNp7FmT/5WYvEJi8jcSk6FEmoGTvgcRPoo4UWuxiR9qrfDldEOWBrkuKyG56UYiDbB1/jBUJqV+/Oowa/Al6nGX3h/wh3pHWBrcGl5z02KmRxu+Bxtuvfnqxw3f4fpoLHXRSGSfMX7neBsa0uhpnxpVoOwTnlN77d58oTZ39dXOclX3SZFQYh4cPw3wA3B5JvVnue/i984PL1Zw+A1QkCI9

vuejs / core