How can I enter my own answer option when choosing the “Own option” checkbox in the form?

Question

Vue.js

I'm doing a test on vue.js, a problem arises (or rather, a complete lack of understanding of how to implement it correctly) with the binding of props and checkboxes, one of which is the "Custom option" checkbox. The user must enter their answer in this field.

What does it look like

My questions go like this:

<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>

That is, questions are run in a cycle and for each question, their answer options are taken.
I don’t understand how you can enter something of your own instead of “Own option”. So far, the only algorithm that I have come up with:
1. When you click on the checkbox, you need to make an input field (it’s not immediately clear how it’s right: changing the input type is not an option, but it’s not clear how otherwise)
2. After hanging the method in v on the block that appears -on:change, which would take the number of the question and the number of the answer as input, its own answer option and then simply overwrite the received value in the array of its questions.
It seems to me that this is too cumbersome, are there easier and more rational options?

Answer 1

Add a property to the question array to indicate that the user can enter their own answer. Response array - store two properties, predefined responses and custom responses. In the template, if a custom response is allowed, add the appropriate control. And you will also need a computed property - a transformed array of responses, where a custom response will be mixed with predefined responses.
https://jsfiddle.net/rtv8uyhz/