VueJS: input with dynamic value + v-model
The main issue here is that you have a dynamic type on the input element, so I expect Vue is getting a little confused. value
is not valid in combination with v-model
for a checkbox input, unless you are binding to an array.
You can solve that by using a v-if/v-else.
<label>
<input v-if="question.question_type_id == 2"
v-model="answer"
type="checkbox"
:name="groupName(question)" />
<input v-else
v-model="answer"
:value="option.id"
type="radio"
:name="groupName(question)" />
{{option.option}}
</label>
Working example.
There are other issues, but this addresses the error you mention in the question. For one, it doesn't make much sense for more than one checkbox to be bound to a single v-model
, unless you are binding to an array. In that case, you would have to swap what type answer
is based on whether is a radio, a checkbox with a single value or a checkbox with multiple values. Seems like it would get complicated.
the proper way is to use placeholder.
<input :placeholder="option.id" v-model="answer" @input="functionToChangeValue($event)"/>
! DO NOT USE VALUE AND V-MODEL TOGETHER it is because v-model create two way biding and your code brake