1、如圖所示: 下拉選中202, 組件的change事件打印出來的是value值(就是下面打印出來的),但我現(xiàn)在只想獲取202(這是賦值在label屬性中的)這個值,不想獲取下面打印出來的值,如何解決? 謝謝了,被這個問題煩住了。
你的select,是數(shù)組對象(不重復(fù)的)形式循環(huán)渲染出來的。所以可以只需操作數(shù)據(jù)形式求得,
添加@change="changeValue"
用Array find方法用對象的屬性查找數(shù)組里的對象即可
changeValue(value) {
console.log(value);
let obj = {};
obj = this.options.find((item)=>{
return item.value === value;
});
console.log(obj.label);
}
具體demo如下:
// html
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@1.3.5/lib/index.js"></script>
<p 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>
</p>
// 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("http://unpkg.com/element-ui@1.3.5/lib/theme-default/index.css");
可以拷貝到這個地址運(yùn)行下即可
label(ref="xxx" data="56")
this.$refs.xxx.getAttribute('data')
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號