vue vue 实现el-select 绑定的value 但是想获取text
时间: 2023-08-08 21:01:48 浏览: 113
Vue + Element-ui的下拉框el-select获取额外参数详解
在Vue中,el-select组件的绑定value属性可以使用v-model指令来实现双向绑定。但是想要获取el-select被选中的文本内容,需要结合ref属性和监听change事件来实现。
首先,在el-select标签上设置一个ref属性,例如ref="mySelect",用于在JavaScript中引用该el-select组件。
然后,通过在el-select上监听change事件,当el-select的选中值发生变化时,执行一个方法来获取选中的文本内容。例如,可以在methods中定义一个方法,例如getText(),来获取选中的文本内容。
在getText()方法中,首先通过this.$refs.mySelect来获取到ref为mySelect的el-select组件的DOM对象,然后通过this.$refs.mySelect.$refs.input来获取到el-select的输入框DOM对象。
接着,再通过input.value获取到输入框中的文本内容,即为el-select被选中的文本内容。
最后,通过调用getText()方法,就能够获取到el-select被选中的文本内容了。
综上所述,通过设置ref属性和监听change事件,在Vue中可以实现el-select绑定的value,同时获取到相应的text。
阅读全文