Значение элемента массива, взятое из v-модели ввода

Question

Я создаю раскрывающееся меню, в котором пользователь может установить несколько флажков, и значения будут добавлены в массив и после этого отобразятся в DOM.

Но пользователь должен иметь возможность написать свою собственную опцию во входных данных, и это значение будет также добавлено в массив и впоследствии отображено в DOM с другими опциями.

«Другой» ввод должен быть скрыт до тех пор, пока не будет установлен флажок «Другой».

Моя идея состояла в том, чтобы добавить атрибут : value, который будет отражать значение v-модели ввода, но он не работает так, как я хочу.

Есть идеи, пожалуйста? Спасибо за все ваши советы.

Я сделал пример - в JSFiddle - https://jsfiddle.net/rxz65s4m/4/

Код:

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <h1>
    What have you eaten today?
  </h1>

  <input type="checkbox" id="first" v-model="selected" value="Fish">
  <label for="first">Fish</label>
  <br />
  <input type="checkbox" id="second" v-model="selected" value="Meat">
  <label for="second">Meat</label>
  <br />
  <input type="checkbox" id="third" v-model="selected" value="Potatoes">
  <label for="third">Potatoes</label>
  <br />

  <!-- Need to take the value from the input -->
  <input type="checkbox" id="fourth" v-model="selected" :value="otherText">
  <label for="fourth">Other</label>
  <!-- this input should be hidden until the checkbox above is checked -->
  <input type="text" v-model="otherText">

  <p>
    {{selected}}
  </p>
</div>

и скрипт:

new Vue({
  el: '#app',
  data: {
    selected: [],
    otherText: null
  }
})

РЕДАКТИРОВАТЬ: Для лучшего объяснения: после того, как флажок «другие», пользователь сможет вводить внутри ввода, который расположен прямо рядом с флажком «другие». Слово, которое вводится внутри ввода, должно быть добавлено в массив, который затем отображается в DOM. Ввод во ввод должен реактивно изменить значение в массиве, так что в конце должен быть, например, массив: ["Fish", "thingUserTyped "]

Answer 1

Вы можете использовать событие @change.

Сравнить: https://vuejs.org/v2/guide/forms.html

Скрипка: https://jsfiddle.net/mgLrv4kd/1/

new Vue({
  el: '#app',
  data: {
    selected: [],
    otherText: null
  },
  methods: {
    getInput(input) {
      this.selected.push(input);
    }
  }
})

 <input type="text" v-model="otherText" @change="getInput(otherText)">

Answer 2

Я думаю, что вы должны добавить кнопку «Добавить», чтобы подтвердить, что вы печатаете в других вариантах. Или вы должны использовать регулярные выражения, чтобы указать, какой пользователь вводит в поле, чтобы отделить их от выбранного поля данных