toggleボタンと確認ダイアログ

作りたかったもの

状態を切り替えるtoggleボタンを押したら確認ダイアログが登場，

• 「OK」が押されれば状態が変化，同時にfirestore上に作成した，ボタンのboolean型fieldが変化
• 「キャンセル」が押されれば状態は変化しない，当然firestore上のfieldも変化しない

みたいなアイテムを作成．

問題点

初め以下のようなコードで実装していました．

example.vue

<template>
  <input
    type="checkbox"
    @click="onConfirmChangeStateDialog"
    :checked="state"
   />
</template>

<script>
onConfirmChangeStateDialog () {
  var title = 'test'
  if (window.confirm(title)) {
    let newState = !this.state
    this.changeEventHandler(newState)
  } else {
  }
},
</script>

changeEventHandler()はfirestoreにfieldの値をsetするためのメソッドです．stateは算出プロパティです．このコードのままだと，firestoreの状態の変更は当然実装できていますが，確認ダイアログで「キャンセル」を押してもボタンの状態が変化してしまいます．

解決方法

そこで，イベントインターフェースの.preventDefault()メソッド(MDN Web docs)を用いてボタンのDOM動作を中止させると，作りたかったものが実装できました．

example.vue

<template>
  <input
    type="checkbox"
    @click="onConfirmChangeStateDialog($event)"
    :checked="state"
   />
</template>

<script>
onConfirmChangeStateDialog (e) {
  var title = 'test'
  if (window.confirm(title)) {
    let newState = !this.state
    this.changeEventHandler(newState)
  } else {
   e.preventDefault()
  }
},
</script>

以上です．