在输入字段上使用 vue 指令（v-model，@input）时 vue 中数据列表的意外行为？

Question

基本上我编写了以下代码片段，其中我在具有数据列表的输入中使用 v-model。当我select其中一个datalist时，datalist在我select一个选项后立即再次出现，就好像我手动输入了代码一样。

new Vue({
  el: '#app',
  data: {
    input: '',
    list : [
    {name:"Item 1", code:"i1"},
    {name:"Item 2", code:"i2"},
    {name:"Item 3", code:"i3"},
    {name:"Item 4", code:"i4"},
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{ input }}</p>
  <input v-model="input" list="list" />
  <datalist id="list">
    <option v-for="item in list" :value="item.code">{{item.name}}</option>
  </datalist>
</div>

但是当我从输入字段 (v-model,@input) 中删除 vue 指令时，这不会发生。为了方便起见，我添加了这两个代码。我希望有人能帮助我，因为如果我的输入字段中没有@input，我需要 v-moder。

new Vue({
  el: '#app',
  data: {
    input: '',
    list : [
    {name:"Item 1", code:"i1"},
    {name:"Item 2", code:"i2"},
    {name:"Item 3", code:"i3"},
    {name:"Item 4", code:"i4"},
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{ input }}</p>
  <input list="list" />
  <datalist id="list">
    <option v-for="item in list" :value="item.code">{{item.name}}</option>
  </datalist>
</div>

EDIT 正如@muka.gergely所建议的，我使用外部方法模糊了输入字段在值被selected。这不是完美的解决方案，但可以按预期工作。（可能是 chrome 中的错误）。这是代码

new Vue({
  el: '#app',
  data: {
    input: '',
    list: [{
        name: "Item 1",
        code: "i1"
      },
      {
        name: "Item 2",
        code: "i2"
      },
      {
        name: "Item 3",
        code: "i3"
      },
      {
        name: "Item 4",
        code: "i4"
      },
    ]
  },
  methods: {
    onSelect(event) {
      let val = event.target.value;
      let select = false;
      let options = document.getElementById("list").childNodes;
      for (var i = 0; i < options.length; i++) {
        //check if value in input box is one of the options
        if (options[i].value === val.trim()) {
          //value was selected
          //do something
          select = true;
          //bluring input field so as not to show datalist again
          event.target.blur();
          break;
        }
      }
      //value was typed
      if (!select) {
        //this.fetchAutocomplete(val);
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{ input }}</p>
  <input v-model="input" list="list" @input="onSelect" />
  <datalist id="list">
    <option v-for="item in list" :value="item.code">{{item.name}}</option>
  </datalist>
</div>

Answer 1

代码按您编写的方式运行：

<p>{{input}}</p> - 这是第一行。在初始化时它是空的，所以现在显示了行。
<input v-model="input" list="list" /> 这是第二行，但在初始化时首先显示。

因此，当您的应用程序对数据更改做出反应时，input 会向下推一行。如果你用 '' 以外的东西初始化你的 input 数据，那么你可以看到没有意外发生（好吧，也许是意外，但不是特别的 :)）：

new Vue({
  el: '#app',
  data: {
    input: '',
    list: [{
        name: "Item 1",
        code: "i1"
      },
      {
        name: "Item 2",
        code: "i2"
      },
      {
        name: "Item 3",
        code: "i3"
      },
      {
        name: "Item 4",
        code: "i4"
      },
    ]
  },
  methods: {
    loseFocus(evt) {
      evt.target.blur()
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{ input || 'Data comes here' }}</p>
  <input v-model="input" list="list" @input="loseFocus" />
  <datalist id="list">
    <option v-for="item in list" :value="item.code">{{item.name}}</option>
  </datalist>
</div>

编辑

问题不是输入的 "jumping"，而是数据列表在选择一个选项后显示为打开。

问题在于此元素在 input/change 事件之后仍处于焦点状态，因此它的行为方式不合要求。（但它应该表现得很好。）

我在元素上添加了 @input，并创建了一个 method 来模糊元素（因此它失去了焦点，并且数据列表没有 open/closes）。

第二次编辑

我们在聊天中进一步讨论了这个问题，并提出了一个更接近 @KshitijDhakal 寻求的实际解决方案的片段：

new Vue({
  el: "#app",
  data: {
    input: '',
    list: [{
        type: 'posts',
        title: 'Posts',
        code: 'i1'
      },
      {
        type: 'albums',
        title: 'Albums',
        code: 'i2'
      }
    ],
    singleItem: {
      title: ''
    }
  },
  methods: {
    fetchData: function(type, id) {
      return fetch(`https://jsonplaceholder.typicode.com/${type}/${id}`)
        .then(response => response.json())
        .then(json => {
          return json
        })
    },
    onSelect: async function(e) {
      if (this.list.map(el => el.code).includes(e.target.value)) e.target.blur()
      this.singleItem = await this.fetchData(this.list.find(el => el.code === e.target.value).type, 1)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="input" list="list" @input="onSelect" />
  <datalist id="list">
    <option v-for="item in list" :value="item.code">{{item.title}}</option>
  </datalist>
  <div>
    <h2>
      {{singleItem.title}}
    </h2>
  </div>
</div>

在输入字段上使用 vue 指令（v-model，@input）时 vue 中数据列表的意外行为？

Unexpected behavior from datalist in vue while using vue directives (v-model, @input) on input field?

html

javascript

html-datalist

vue.js

编辑

第二次编辑