时间戳

首页 > 解决方案 > 获取 datalist 输入的值，使用 v-model 清除 datalist

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

问题描述

我有一个充满选项的数据列表，以及一个链接到该数据列表的输入。当用户进行选择时，我正在使用 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'}],
    }
});

标签： javascripthtmlvue.js

解决方案

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

解决方案：

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

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>

推荐阅读