vue.js双向绑定之--select获取text 和 value

在大多数情况下select下拉菜单都是value和text设置不同的值的，value一般来说是与后台交互的值，而text是前端用来显示的文本；
但是，vue.js对到表单的双向绑定时如果option设置了value及text的情况下，model获取到的是value值！
如果直接绑定值的话，页面上显示的文案就是会value，显然这并不是我们想要的结果！那有什么办法能获取到被选中的option中的text呢？
<select class="cell-select cell-right right-select" v-model="selValue">
                        <option :value="camera.val" v-for="(camera,index) in selList" :key="index">pw_camera.text</option>
</select>

js代码：

data() {        
            return {
                selValue:'1',
                selList:[
                      {val: '1',text: '入口1号摄像头'},
                      {val: '2',text: '入口2号摄像头'},
                      {val: '3',text: '入口3号摄像头'},
                      {val: '4',text: '出口4号摄像头'},
                      {val: '5',text: '出口5号摄像头'},
                      {val: '6',text: '出口6号摄像头'},
                      {val: '0',text: '所有摄像头'}
                ]
            }

选中后直就是 this.selValue的值。

也可以 过滤器filter可以一试：




Vue.filter('optionTxt',function(value,obj){ var newObj = {}; if(value=='请选择'){ return value
    }else{ for(var i=0; i<obj.length; i++){
            newObj[obj.val] = obj.txt;
        } return newObj[value]
    }
})


定义过滤器optionTxt,把optionObj对象传入进行遍历，用一个新对象newObj储存相应的值，把选中的value值作为参数传入返回newObj的值~
VM:


var vm = new Vue({
        el: '#app',
        data: {
            selectTxt: '请选择',
            optionObj: [
                {val: '1',txt: '选项A'},
                {val: '2',txt: '选项B'},
                {val: '3',txt: '选项C'}
            ]
        }
})

 

HTML：

 


<div id="app"> <div class="container"> <span>方便联系时间段</span> <p>pw_selectTxt | optionTxt(optionObj)</p> <select v-model="selectTxt "> <option v-for="option of optionObj" :value="option.val">pw_option.txt</option> </select> </div> </div>