javascript - 在输入字段上使用 vue 指令(v-model、@input)时，vue 中的数据列表出现意​​外行为？

Question

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

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>

编辑按照@muka.gergely的建议，我在选择值后使用外部方法来模糊输入字段。这不是完美的解决方案，但可以按预期工作。 (可能是 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

代码按照您编写的方式工作:

1. <p>{{input}}</p> - 这是第一行。在初始化时它是空的，所以现在显示行。

2. <input v-model="input" list="list" />这是第二行，但在初始化时它首先显示。

因此，当您的应用对数据更改使用react时，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>

编辑

问题不是输入的“跳跃”，而是选择一个选项后数据列表显示为打开状态。

问题是该元素在输入/更改事件后保持焦点，因此它的行为不符合预期。 (但正如它应该表现的那样。)

我添加了@input元素上，并创建了一个 method模糊元素(因此它失去焦点，并且数据列表不会打开/关闭)。

第二次编辑

我们在聊天中进一步讨论了这个问题，并提出了一个更接近 @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>