Делаю тест на vue.js, возникает проблема (а вернее полное отсутствие понимания, как правильнее реализовать) со связыванием props и чекбоксов, одним из которых является чекбокс «Свой вариант». В это поле пользователь должен ввести свой ответ.
Вопросы у меня выстраиваются таким образом:
<div v-for="(question,index) in questions" class="quiz__question question" v-if="result.length > 0">
<div class="question__error" v-if="nonValidate.includes(index)">
Ответьте на вопрос
</div>
<div class="question__title" :data-question-num="index">
{{index+1}}. {{question.text}}
<div v-if="question.required" class="question__required">*</div>
</div>
<div class="question__answers">
<div v-for="(ans,i) in question.answers" class="question__answer">
<input :type="question.type"
v-model="result[index].answer"
:value="ans"
:id="'q'+index+'a'+i"
:placeholder="[question.type == 'text' ? ans : '']">
<label :for="'q'+index+'a'+i">{{ans}}</label>
</div>
</div>
</div>
То есть в цикле прогоняются вопросы и для каждого вопроса берутся свои варианты ответа.
Мне не понятно каким образом можно вместо «Свой вариант» вписать что-нибудь свое. Пока единственный алгоритм, который я придумал:
1. При клике по чекбоксу нужно сделать поле ввода (тут сразу не понятно, как правильно: менять тип инпута не вариант, а как иначе - не понятно)
2. После повесить на появляющийся блок метод в v-on:change, который принимал бы на вход номер вопроса и номер ответа, свой вариант ответа и потом просто перезаписать полученное значение в массиве своих вопросов.
Мне кажется это слишком громоздким, есть варианты проще и рациональнее?
Средний
