0

I have been using v-on:change to trigger option changes in a vuejs app.

<select v-on:change="myMethod()">
  <option v-for="(val, key) in options" :value="val">
    {{key}}
  </option>
</select>

But I also need to trigger the method whenever the same option is re-selected a second time.

The change event is not triggered a second time in that case.

I cannot find lists of events for vuejs.
Here is one I found for HTML : https://www.w3schools.com/tags/ref_eventattributes.asp

I tried v-on:select, not doing anything

EDIT:
My intent is to link the option to different 2 values, one v-model would not suffice. On second click, a boolean property of app.$data would be inversed. That's why I'm not using v-model.

stallingOne
  • 3,633
  • 3
  • 41
  • 63
  • It is in Vue2 Doc: https://vuejs.org/v2/guide/forms.html#Select-Options, do not use change, use v-model. – Zysce Aug 27 '18 at 13:29
  • In case this is an [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem), can you give more information about what you're trying to do and why you require this behavior? – Decade Moon Aug 27 '18 at 13:36
  • Possible duplicate of [Is there an onSelect event or equivalent for HTML – thanksd Aug 27 '18 at 13:38

3 Answers3

1

This question actually has nothing to do with Vue, it's all about what native events <select> emits when an option is selected, change and input, and both of these events only fire when the selected option is changed and not when the selected option is re-selected.

As far as I know there is no way to detect when the same option is re-selected. You may need to roll your own control which has this feature.

You might be able to hack it by tracking mouse events, but it's likely that won't work 100% in every situation (different browsers and mobile, for example).

Decade Moon
  • 32,968
  • 8
  • 81
  • 101
1

Do you want something like v-on:click or exactly this.

new Vue({
el:"#app",
data:{
  test:"",
  options:["11","22"]
},
methods:{
  myMethod:function(){
    if(this.test){
      console.log("myMethod called . test is :"+this.test+" at ->", new Date());
    }
  }
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-on:click="myMethod" v-model="test">
  <option v-for="(val, key) in options">
    {{val}}
  </option>
</select>
</div>
Niklesh Raut
  • 34,013
  • 16
  • 75
  • 109
  • The problem I have with v-on:click is that it is triggered even when you just want to see all the options. I do see how `if(this.test)` would prevent that the first time, but once a value has bee selected, it wouldn't prevent it anymore. – stallingOne Aug 27 '18 at 13:51
  • can you share , in which case you need this ? I think `v-on:change` is best fitted in all condition. – Niklesh Raut Aug 27 '18 at 14:57
0

Try with onclick (on the select, not the options), it seems to work, not sure if it works on all browsers though, but it's being triggered when an option is clicked at least on webkit browsers.

https://jsfiddle.net/zdy25mo7/3/

html

<p>Select a new car from the list.</p>

<select id="mySelect">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>

<p id="clicked_div">clicked: 0 times</p>

javascript

var clicked = 1
document.getElementById('mySelect').onclick = function otherFunction(event) {
    document.getElementById("clicked_div").innerHTML = "clicked: " + clicked + " times";
    clicked++;
}
arieljuod
  • 15,460
  • 2
  • 25
  • 36
  • @stallingOne : Did you tried [this answer](https://stackoverflow.com/a/52040699/2815635) – Niklesh Raut Aug 27 '18 at 13:42
  • @stallingOne, weird, it's working on chrome and opera here (linux), on ff it works too but it's fired twice so it's not consistent either (also works with onmouseup, but fired twice on FF) – arieljuod Aug 27 '18 at 14:57