Какое событие мы можем использовать в теге select, который срабатывает как при изменении, так и при повторном выборе той же опции?

Question

Я использую v-on:change для запуска изменения параметров в приложении vuejs.

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

Но мне также нужно запускать метод всякий раз, когда одна и та же опция повторно выбирается во второй раз.

В этом случае событие change не вызывается второй раз.

Я не могу найти списки событий для vuejs.
Вот что я нашел для HTML: https://www.w3schools.com/tags/ref_eventattributes.asp

Я пытался v-on:select, ничего не делая

EDIT:
Мое намерение состоит в том, чтобы связать опцию с двумя разными значениями, одной v-модели будет недостаточно. При втором щелчке булево свойство app. $ Data будет инвертировано. Вот почему я не использую v-модель.

Answer 1

Вы хотите что-то вроде v-on:click или именно это.

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>

Answer 2

Попробуйте с помощью onclick (при выборе, а не в параметрах), кажется, что он работает, но не уверен, что он работает во всех браузерах, но он запускается при нажатии опции, по крайней мере, в браузерах webkit.

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>

1009 * Javascript *

var clicked = 1
document.getElementById('mySelect').onclick = function otherFunction(event) {
    document.getElementById("clicked_div").innerHTML = "clicked: " + clicked + " times";
    clicked++;
}

Answer 3

Этот вопрос на самом деле не имеет ничего общего с Vue, все дело в том, какие собственные события <select> испускаются при выборе опции, change и input, и оба эти события запускаются только при изменении выбранной опции а не когда выбранная опция переизбрана.

Насколько я знаю, нет способа определить, когда выбран тот же вариант. Возможно, вам придется развернуть свой собственный элемент управления, который имеет эту функцию.

Вы могли бы иметь возможность взломать его, отслеживая события мыши, но вполне вероятно, что он не будет работать на 100% в каждой ситуации (например, в разных браузерах и на мобильных устройствах).