前提・実現したいこと
Vueにてプルダウンの値を変更する際に、
確認メッセージ表示後、OKの場合変更、キャンセルした場合は元に戻すと言う
処理を作りたいのですが、上手く出来ません。
以下で試しに実施してみたところダメでした。
こちら正しく動作する仕組みか、あるいは実現可能な代替案を
どなたか教えて頂けますでしょうか。
よろしくお願いいたします。
該当のソースコード
vue
1<template> 2 <div> 3 <select v-model="selected" @focus="getPreviousVal"> 4 <option disabled value="">Please select one</option> 5 <option>A</option> 6 <option>B</option> 7 <option>C</option> 8 </select> 9 <div>Selected: {{ selectVal }}</div> 10 </div> 11</template> 12 13<script> 14export default{ 15 data() { 16 return { 17 selectVal:"", 18 previousVal:"" 19 } 20 }, 21 computed:{ 22 selected: { 23 get(){ 24 return this.selectVal 25 }, 26 set(value){ 27 if(window.confirm('変更しますか')){ 28 this.selectVal = value 29 }else{ 30 this.selectVal = this.previousVal 31 } 32 } 33 } 34 }, 35 36 methods: { 37 getPreviousVal: function(){ 38 this.previousVal = this.selectVal 39 } 40 } 41} 42</script> 43
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。