Vue 2.x与input-datalist新特性的结合解决

最新推荐文章于 2024-03-06 15:20:25 发布

原创最新推荐文章于 2024-03-06 15:20:25 发布 · 662 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

web部署专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了如何在Vue组件中利用datalist元素创建输入框的联想功能，同时确保提交时使用的是选项的序列号而非显示的文本。通过v-for循环遍历设备列表并匹配输入值，当找到匹配项时获取对应的序列号，并通过事件发射器传递。这种方法在保持用户界面友好性的同时，实现了数据处理的准确性。

需求：利用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);
        }
    }