vue.js - 我无法在 vue.js 中使用 datalist 的更改事件，更改事件不起作用

Question

我尝试使用 bootstrap-vue 我会自动完成，但我有一些麻烦，我该怎么做

<b-form-input :list="id"></b-form-input>
<datalist :id="id" @change="d => on_select(d)"  >
      <option v-for="size in sizes" :key="size"   :data-value="size" :value="size"  />
</datalist>

on_select (t) {
   debugger
   console.log(t)
},

标签： vue.jshtml-datalist

Answer 1

@change将事件更改为input元素。

html:

<div id="app">
   <b-form-input list="my-list-id" id="input-with-list" @input="changeSelectedItem" ></b-form-input>
   <datalist id="my-list-id">
       <option v-for="size in sizes">{{ size }}</option>
   </datalist>
</div>

零件：

 data() {
   return {
     options: ['1', '2', '3', '4']
   }
 },
 methods: {
   changeSelectedItem(e) {
      this.option = e
   }
 }

如果您想获取项目的索引或有关它的其他数据，您可以遍历您的size列表。

看到它https://jsfiddle.net/Nanif/L3h5f18x/42/