Question

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

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

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

我的想法是添加: value属性，该属性将反映输入的v-model值，但不能按我想要的方式工作。

有什么想法吗？谢谢您的所有提示。

我做了一个例子-在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”，“ somethingUserTyped”]

Answer 1

我认为您应该添加一个“添加”按钮以确认您在其他选项中输入的内容。或者，您应该使用正则表达式来减少用户在字段中键入的内容，以便将他们分隔为所选数据字段

Answer 2

您可以使用@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)">

从输入的v模型获取的数组项值

2 个答案: