Vue.js selectで同じ値を選択してもイベントを発火させる

selectの中のある選択肢を選択した時は、
ダイアログを表示するようにしたかったんですが、

ダイアログ表示用の選択肢を一度選択してしまうと、
もう一度続けて表示したいときにwatchや@changeだと発火できません。

そんな時は@inputを使うようです

<template>
  <!-- vuetifyを使ったサンプル -->
  <v-select
    dense
    :items="options"
    @input="handleSelect"
    v-model="selectValue"
  >
  </v-select>
</template>

<script>
export default {
  data() {
    return {
      options:[
        { text: '普通に選択1', value: '1' },
        { text: '普通に選択2', value: '2' },
        { text: 'イベント発火', value: '3' },   
      ],
      selectValue: '1',
    }
  },
  
  methods: {
    handleSelect: function() {
      if (this.selectValue === '3') {
        console.log('イベント発火!')
      }
    }
  }
}
</script>

おしまい。

いいなと思ったら応援しよう!