[JavaScript知识库]Vue 2.x与input-datalist新特性的结合解决

需求：利用datalist新特性实现选择框输入与联想功能，同时又需要展示内容与提交序列号不同，即类似于select<option value="serial">text</option> 看到text但是提交serial.

//Vue 组件中模板, mark为随机数以应对单页面重复多个组件的id重复问题
/*
<input type="text" :list="mark" class="form-control" @change="deviceselect" aria-label="Text input with dropdown button" v-model="val">
              <datalist :id="mark">
                <option v-for="item in devices" >{{item.lastname}}</option>                 
              </datalist>

*/

//Vue methods
methods: {        
        deviceselect: function() {
            var res;
            var nval = this.val;
            this.devices.forEach(
                function(item){       
                   //console.log(item);
                   if(item.lastname == nval){
                       res=item.serial;//通过遍历取出对应序列号
                       //console.log(item);
                   }                        
            });            
            this.$emit('deviceselect', res);
        }
    }