Strange Behavior for radio button with using v-model


#1

My issue is strange to me and simple to explain i am doing a quiz with vue.js and when i change from radio button to another its ignoring the selection some times i have recorded a gif to show the problem and it is also in codepen

and here is the codepen link


#2

Your radion buttons use response.correct as value which is not unique, your question contains multiple responses with the same value (undefined as you don’t have correct: false).

The right answer is selected and your value is true. If you now select a wrong answer, your value gets updated to undefined. As two responses have this value, the second wrong response will be marked as selected (but you have selected the first wrong response).

You could use the index of each response as value (which is unique for each question) or add a unique identifier to each response.


#3

I did all the answer also correct: false also the same problem i even did it correct: 0 and correct: 1 and still have the same issue i updated the codepen link you can check it out


#4

The exact value (undefined, false, 0, …) doesn’t matter, the problem is that your value is not unique. All radio buttons of the same group (with the same name attribute) must have a unique value, otherwise the browser does not know which radio button is selected (and only one radio button can be selected at a time).

You can use :value="i" to use your response index as the value, this should solves your bug. You then have to adjust your score function.