<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>