vue实现 select 下拉框点击选项触发事件

 

注意不要使用 @click 点击事件会不生效，使用 @click.native

 

 

 

获取option的ID值

1.html部分

<select  class="bw1 bss bc4 h40px w100 dib br4 fl" v-model="ProductActive"  @change="changeProduct($event)" >
       <option value="0">商品名称</option>  
       <option v-for="(item,index) in productList" :key="index"  :value='item.id'>{{item.title}}</option>  
</select>  

　　

2.javascript部分

 <script>
    export default {
        data() {
            return {
                ProductActive: 0, //商品名称当前选中项
                productList: [],
            }

        },
        methods: {
            changeProduct(event) {
                this.ProductActive = event.target.value; //获取商品ID，即option对应的ID值
            },
        }
    }
</script>