javascript - element-ui 如何获取select组件的label值?
本文介绍了javascript - element-ui 如何获取select组件的label值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
1、如图所示: 下拉选中202, 组件的change事件打印出来的是value值(就是下面打印出来的),但我现在只想获取202(这是赋值在label属性中的)这个值,不想获取下面打印出来的值,如何解决? 谢谢了,被这个问题烦住了。
解决方案
你的select,是数组对象(不重复的)形式循环渲染出来的。所以可以只需操作数据形式求得,
添加@change="changeValue"
changeValue(value) {
console.log(value);
let obj = {};
obj = this.options.find((item)=>{
return item.value === value;
});
console.log(obj.label);
}
具体demo如下:
// html
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.5/lib/index.js"></script>
<div id="app">
<template>
<el-select v-model="value" placeholder="请选择" @change="changeValue">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</div>
// js
var Main = {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
var Ctor = Vue.extend(Main)
new Ctor({
methods:{
changeValue(value) {
console.log(value);
let obj = {};
obj = this.options.find((item)=>{
return item.value === value;
});
console.log(obj.label);
}
}
}).$mount('#app')
@import url("//unpkg.com/element-ui@1.3.5/lib/theme-default/index.css");
这篇关于javascript - element-ui 如何获取select组件的label值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文