javascript - vue.js select下拉框事件绑定不上

问题描述

问 题

<select name="" id="" v-model="reportId">
    <option value="" v-if="reportData.length==0">&nbsp;没有更多了</option>
    <option value="" @click="reportPrice(item.id)" v-for="item in reportData" v-bind:value="item.id" v-html="'报表'+(parseInt($index)+1)"></option>
</select>

上面是模板

reportPrice(id){
    alert();
    let self = this;
    var url = Lib.api.project_reports_price;
    var params = {
        'access_token': USER.access_token,
        'reportId': id
    }
    var callback = (response)=>{
        if(response.code==200){
            self.price = response.price;
        }
    }
    Lib.run.ajax(url,'post',params,callback);
}

这个是绑定的事件，alert都不出来，请问是什么原因

解决方案

option是不能绑定事件的，若要绑定事件，在select上绑定change事件，每次option点击都会触发change事件，而select的value就是选中的option的value，可以用event.target取到这个值，用v-model也可以，但是v-model会忽略option的初始值

<select name="" id="" v-model="reportId" @change="reportPrice($event)">
    <option value="" v-if="reportData.length==0">&nbsp;没有更多了</option>
    <option :value="item.id" v-for="item in reportData"  v-html="'报表'+(parseInt($index)+1)"></option>
</select>

这篇关于javascript - vue.js select下拉框事件绑定不上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！