vueのプルダウンにてキャンセル時に値を元に戻す

Question

前提・実現したいこと

Vueにてプルダウンの値を変更する際に、
確認メッセージ表示後、OKの場合変更、キャンセルした場合は元に戻すと言う
処理を作りたいのですが、上手く出来ません。

以下で試しに実施してみたところダメでした。
こちら正しく動作する仕組みか、あるいは実現可能な代替案を
どなたか教えて頂けますでしょうか。

よろしくお願いいたします。

該当のソースコード

<template>
  <div>
    <select v-model="selected" @focus="getPreviousVal">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <div>Selected: {{ selectVal }}</div>
  </div>
</template>

<script>
export default{
  data() {
    return {
      selectVal:"",
      previousVal:""
    }
  },
  computed:{
    selected: {
      get(){
        return this.selectVal
      },
      set(value){
        if(window.confirm('変更しますか')){
          this.selectVal = value
        }else{
          this.selectVal = this.previousVal
        }
      }
    }
  },

  methods: {
    getPreviousVal: function(){
      this.previousVal = this.selectVal
    }
  }
}
</script>

Answer 1

変更先がDBだったので、変更前に値を変えたくなかったのですが、
アドバイスを基に以下のように直しました。
@focusも消せてスッキリしました、ありがとうございます。

該当のソースコード

<template>
  <div>
    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <div>Selected: {{ selectVal }}</div>
  </div>
</template>

<script>
export default{
  data() {
    return {
      selectVal:"",
      tempVal:""
    }
  },
  computed:{
    selected: {
      get(){
        return this.selectVal || this.tempVal
      },
      set(value){
        console.log("prevval:", this.previousVal)
        this.tempVal = value
        if(window.confirm('変更しますか')){
          this.selectVal = this.tempVal
        }
        this.tempVal =""
      }
    }
  }
}
</script>

Answer 2

Vueがプルダウンの変更を検知し、selectedValを更新しようとします。
ここでダイアログが表示され、「キャンセル」が選択された場合、previousValを代入していますが、
selectedValの値はまだ変更されていないので、selectedValとpreviousValの値は同じです。
そのため、値が変更されていないので、Vueはプルダウンの再描画を行わず、選択肢は元にもどりません。

解決方法としては以下のように、selectedValの値を変更した後、確認ダイアログを表示し、「キャンセル」の場合はpreviousValを代入するように処理を変更すればいいと思います。

set(value) {
  this.selectVal = value;
  if (!window.confirm("変更しますか")) {
    this.selectVal = this.previousVal;
  }
}

Comments

[haggis]

なるほど、一回状態を変えてしまってから元に戻せば良かったんですね。
ありがとうございした。