CODEWITHSUNDEEP
vue.js
Sylvain Attoumani
Sylvain Attoumani

Reputation: 1194

Clickable option with action in select

I'm working on a Vue file and have a select 

 <select v-if="show">
     <option v-on:click="test()" value=""> someData</option>
     <option>otherdata</option>
 </select>

[...] 
 var instance = new Vue({
        el: "#General",
        [...]
        methods:{
            test: function(){
                alert('youre goddam right');
            }
            [...]
        }
    [...]
 }

So What i'm trying to do is to display my datas someData and otherdata. That works great but what i want it's when the user click on firstData, the action "test" append, and an alert comes up but that doesn't work here. I tried with the v-on:click but nothing happend.

Thanks for the help

Upvotes: 0

Views: 1342

Answers (1)

FitzFish
FitzFish

Reputation: 8629

Yes so it appears that the click event is not triggered for an <option> element. Here is one of the many fix available: using the input event on the select instead, and filter the value. 

var instance = new Vue({
	el: "#General",
	methods:{
		test: function(value) {
			if (value === "choice1") {
				alert('youre goddam right');
			}
		}
	}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="General">
	<select v-on:input="test($event.target.value)">
		 <option value="choice1">someData</option>
		 <option>otherdata</option>
	</select>
</div>

Upvotes: 1

Related Questions