[Vuejs]-I can't use datalist's change event in vue.js, change event is not working

by

0👍

Change the @change event to input element.

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>

component:

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

if you want to get the index of item, or other data about it, you can loop over your size list.

see it https://jsfiddle.net/Nanif/L3h5f18x/42/

Leave a comment