Vue Js - Radio inputs not updating model value

Question

I have an object containing questions data.

I'm looping through these in the view and then aiming to update the objects 'answer' value.

The questions come from an API and are structured as:

[
    {
        "id": 1,
        "choices": [
            // choices
        ],
        "created_at": "2016-12-08 09:19:30",
        "updated_at": "2016-12-09 15:29:14",
        "answer": []
    },
]

They don't come from the API with an answer value but I have added it in the js file.

I then show the question answers in another loop:

<div v-for="(choice, index) in question.choices" class="input-row">
    <input type="radio" v-model="question.answer" value="choice.value"/>
</div>

I then out the answer into the view:

@{{ question.answer }}

I can see it's an empty array, but when selecting the radio button the array isn't updated like I thought it would. Any ideas?

Marcelo H. Carneiro · Accepted Answer · 2016-12-12 14:23:46Z

1

Your input have wrong markup to bind the value with a Vue data property.

<div v-for="(choice, index) in question.choices" class="input-row">
    <input type="radio" v-model="question.answer" v-bind:value="choice.value"/>
</div>

answered Dec 12, 2016 at 14:23

Marcelo H. Carneiro

1292 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lovelock Over a year ago

Thanks, that helped. I was also setting up my data and then adding the new properties so they were not reactive. Refactored a bit and now its okay and everything is reactive.

Collectives™ on Stack Overflow

Vue Js - Radio inputs not updating model value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related