Question

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

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

使用v模型获取数据列表输入的值，将清除数据列表

1 个答案: