VueJSで、チェックボックス変更でOK/キャンセル

VueJSで、チェックボックス変更で@changeとconfirmを使用してOK/キャンセルを出すところまでは完了しました。
ここで、キャンセルが押された場合、実行を中止する方法がわかりません。
以下のような定義を記述しましたが上手に反映されません。

javascript
1        methods: {
2            unlock() {
3                this.checkBoxTemp = Boolean(this.formData.locked);
4                if (!confirm('ロック状態を変更しますか？')) {
5                    console.log(this.checkBoxTemp);
6                    this.formData.locked = !this.checkBoxTemp;
7                }
8            }
9        }

#追記:　2019/11/22 13:56
現在全体のソースコードは、以下のような形です。

<template>
  <div>
    <v-checkbox
      v-model="formData.locked"
      label="項目ロック"
      color="default"
      @change.stop="unlock()"
    ></v-checkbox>
  </div>
</template>
<script>
    export default {
        name: "Pref",
        data() {
            return {
                dialog: true,
                checkBoxTemp: null,
                formData: [locked: true],
            }
        },
        methods: {
            unlock() {
                this.checkBoxTemp = Boolean(this.formData.locked);
                if (!confirm('ロック状態を変更しますか？')) {
                    console.log(this.checkBoxTemp);
                    this.formData.locked = !this.checkBoxTemp;
                }
            }
        }
    }
</script>

期待する動作

項目ロックの状態が変化したときに、メソッド内のunlock()が発動して、確認画面が出てくる。
そのあと、キャンセルを押すと、元の状態(変更前の状態)に戻るという動作を期待しています。

yambejp

2019/11/22 04:49 編集

もう少し動作が最低限確認できる全体像を書いたほうがよいのでは？

TJMYK

2019/11/22 04:59

閲覧頂きありがとうございます。現在のソースコードと期待する動作とおおまかな全体像を追加させていただきました。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことかな

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
6  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
7  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
8
9  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
10  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
11</head>
12<body>
13<div id="app">
14  <v-app>
15    <v-checkbox
16      v-model="formData.locked"
17      label="項目ロック"
18      color="default"
19      @change="unlock($event)"
20    ></v-checkbox>
21  </v-app>
22</div>
23<script>
24var app = new Vue({
25  el: '#app',
26  vuetify: new Vuetify(),
27  data() {
28    return {
29      formData: { locked: true },
30    }
31  },
32  methods: {
33    unlock(e) {
34      if (!confirm('ロック状態を変更しますか？')) {
35        // https://jp.vuejs.org/v2/api/index.html#Vue-nextTick
36        Vue.nextTick()
37        .then(() => {
38          this.formData.locked = !e;
39        });
40      }
41    }
42  }
43});
44</script>
45</body>
46</html>