<template>
<div class='main'>
<select v-model="ProductActive" @change="changeProduct($event)">
<option value="0">商品名称</option>
<option @change="changeProduct" v-for="(item,index) in productList" :key="index" :value='item.id' v-text="item.title"></option>
</select>
<button @click="aa()">按钮</button>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
ProductActive: 0, //商品名称当前选中项
productList: [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'three'}],
params:[]
};
},
methods: {
changeProduct(event) {
this.productList.map(({id},index)=>{
if(id==event.target.value){
//同时获取value 和text
this.params=this.productList[index]
}
})
//输出参数
console.log(this.params)
},
// 如果只需要获取value,则用watch即可
watch:{
ProductActive(val,oldval){
console.log(val,oldval)
},
},
},
};
</script>
网友评论