Javascript 从输入'；s-v模型

我正在创建一个下拉菜单，用户可以在其中选中多个复选框，这些值将被添加到数组中，然后在DOM中显示

但是用户必须能够在输入中写入自己的选项，该值也将添加到数组中，然后与其他选项一起显示在DOM中

应隐藏“其他”输入，直到选中“其他”复选框

我的想法是添加

：value

属性，该属性将反映输入的v型值，但它不能按我想要的方式工作

有什么想法吗？谢谢你给我的建议

我在JSFIDLE中做了一个例子-

代码：

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

---

编辑：更好的解释：选中“其他”复选框后，用户将能够在“其他”复选框旁边的输入中键入内容。输入中键入的单词应添加到数组中，然后在DOM中显示。在输入中键入应该会反应性地更改数组中的值，因此最后应该有数组：[“Fish”，“somethingUserTyped”]

您可以使用

@change

事件

比较：

小提琴：

newvue({
el:“#应用程序”，
数据：{
选定：[]，
其他文本：空
},
方法：{
getInput（输入）{
此.已选.推送（输入）；
}
}
})

---

其他文本输入按预期工作，您希望的行为是什么？@Slim感谢您的评论。为了更好的解释，我添加了编辑。对不起，亲爱的，我指的是@MapeSVK

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