回答編集履歴

追記

2020/05/16 16:23

投稿

スコア1752

test CHANGED Viewed

@@ -242,11 +242,9 @@
         this.message = "変更できません";
-        const vm = this;
         this.$nextTick(function() {
-          vm.radioValue = "one";
+          this.radioValue = "one";
         });
@@ -281,3 +279,43 @@
 </script>
 ```
+**追記 (2020/05/17)**
+上記はasync/awaitで下記のように書き直すことができます。
+```
+methods: {
+  updatedRadio: async function(e) {
+    this.radioValue = e.target.value;
+    // DOM更新の完了を待つ
+    await this.$nextTick();
+    if (this.checkValue) {
+      this.message = "変更できません";
+      this.radioValue = "one";
+    }
+  }
+},
+```

修正

2020/05/16 16:23

投稿

スコア1752

test CHANGED Viewed

@@ -137,3 +137,147 @@
 </script>
 ```
+**修正**
+以下のように修正しました。これでチェックボックスがonのときは1番目のラジオボタンにチェックが強制的に付くようになります。
+```
+<input type="checkbox" v-model="checkValue" />
+<br />
+<input
+  type="radio"
+  id="one"
+  value="one"
+  :checked="radioValue === 'one'"
+  @change="updatedRadio"
+/>
+<label for="one">One</label>
+<br />
+<input
+  type="radio"
+  id="two"
+  value="two"
+  :checked="radioValue === 'two'"
+  @change="updatedRadio"
+/>
+<label for="two">Two</label>
+<br />
+<input
+  type="radio"
+  id="three"
+  value="three"
+  :checked="radioValue === 'three'"
+  @change="updatedRadio"
+/>
+<label for="three">three</label>
+<div>{{ message }}</div>
+```
+```
+<script>
+export default {
+  data() {
+    return {
+      checkValue: false,
+      radioValue: null,
+      message: null
+    };
+  },
+  methods: {
+    updatedRadio(e) {
+      this.radioValue = e.target.value;
+      if (this.checkValue) {
+        this.message = "変更できません";
+        const vm = this;
+        this.$nextTick(function() {
+          vm.radioValue = "one";
+        });
+      }
+    }
+  },
+  watch: {
+    checkValue(newVal, val) {
+      if (newVal) {
+        this.radioValue = "one";
+      } else {
+        this.radioValue = null;
+        this.message = "";
+      }
+    }
+  }
+};
+</script>
+```