'Vue select tag on change not firing when selecting the same option

I have a select tag that should trigger function when an option is selected.

<select id="selector" class="form-control" @change="executeAction" v-model="selectedAction">
  <option value="" selected disabled>Select action</option>
  <option value="view">View Details</option>
  <option value="edit">Edit</option>
  <option value="delete">Delete</option>
</select>

methods: {
    executeAction() {
        console.log('action is se', this.selectedAction);
    },
}

Now, what I expected was:

  • When selecting the same option for the second time (For example: View Details), it should log the selected option.

What I got:

  • It's not firing at all, I need to select other option so that I can reselect the View Details again.

What I tried:

  • Using watch, and the result was the same.
  • Using @input instead of @change, still result was same.
  • Usin v-on: instead of @, still no luck.

Is this a bug? or wrong implementation?

Anyways, would be great to have an answer to this.

vue.jsvuejs2


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions