获取 datalist 输入的值，使用 v-model 清除 datalist答案

【问题标题】：Getting value of datalist input, using v-model clears the datalist获取 datalist 输入的值，使用 v-model 清除 datalist
【发布时间】：2018-10-18 22:50:59
【问题描述】：

我有一个填充了选项的数据列表，以及一个链接到该数据列表的输入。当用户进行选择时，我正在使用 v-model 将该值发送到 Vue 实例数据变量，但是一旦由于双向绑定而单击一个选项，它就会清除所有其他选项。有没有办法在选择后只获取值但不清除所有其他选项。

示例代码：

<datalist id='list'>
    <option v-for='item in arrayOfObjects' :value='item'>
    </datalist>
</div>
</div>

Vue 实例：

var app = new Vue({
    el: '#app',
    data: {
        optionVal: '',
        arrayOfObjects: [{key:'value'},{key:'value'},{key:'value'}],
    }
});

【问题讨论】：

对于 Vue 中的 v-for 需要是一个数组而不是单个对象。
你能澄清更多吗？
@Varcorb 搞错了。 See Here
@Varcorb 是的，你是对的，在我的实际代码中，它实际上是一个对象数组。
@AriVictor 我不是要吹毛求疵，但@Varcorb 是不对的。无论您是否使用数组，Vue 都非常明确地启用了 v-for 中的对象。您甚至可以将 v-for 中的键和值分开。很快就会有答案。

标签： javascript html vue.js

【解决方案1】：

你的问题不是双向绑定。就是当你选择一个选项时，它会过滤掉其余的选项。

解决办法：

输入时，保存值，然后手动清除输入元素。

var app = new Vue({
  el: "#app",
  data: {
    optionVal: "",
    arrayOfObjects: [{
      "name": "Coatimundi, white-nosed"
    }, {
      "name": "Dragon, netted rock"
    }, {
      "name": "Coot, red-knobbed"
    }, {
      "name": "Red-shouldered glossy starling"
    }, {
      "name": "Numbat"
    }, {
      "name": "Cat, toddy"
    }, {
      "name": "Square-lipped rhinoceros"
    }, {
      "name": "Griffon vulture"
    }, {
      "name": "Ibis, sacred"
    }, {
      "name": "Weeper capuchin"
    }]
  },
  methods: {
    saveSelectionAndReset(e) {
      let val = e.target.value;
      if (val) {
        this.optionVal = val;
      }
      e.target.value = "";
    }
  }
});

body,input{font-family:futura,helvetica!important;text-transform:uppercase}body{height:100vw;background:linear-gradient(135deg,#13f1fc 0,#0470dc 100%)}#app{display:flex;justify-content:flex-start;align-items:center;flex-direction:column;padding:10px}input{border:none;box-shadow:0 20px 30px -15px rgba(0,0,0,.4);border-radius:3px;font-size:1.2rem;padding:8px;margin:5%}input:focus{outline:0}p{color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.2)}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <input placeholder="Select an Option" @input="saveSelectionAndReset" list="list"/>
  <datalist id="list">
    <option v-for="item in arrayOfObjects" :value="item.name">
  </datalist>
  <p>{{optionVal || 'None Selected'}}</p>
</div>

【讨论】：