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

Question

<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都不出来，请问是什么原因

Answer 1

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>

Answer 2

@click="reportPrice(item.id)" 这代码有问题吧，你绑定上下文试试

Answer 3

试试<option/>上绑DOM事件能否触发不就知道了

<option onclick="alert(1)">1</option>

答案是不能

Answer 4

<option @change="alert(1)">1</option>
try again ？

Answer 5

下拉框的option是不能绑定事件的吧，你要在select绑定事件啊，而且你那$index是没定义的吧，还有你那option上多余的value你可以删掉了。把事件绑定在select上，把reportId传进去：

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