特定の条件の場合に、radioボタンの値を変更したい

いつもお世話になっております。

今回、特定の条件の場合において、radioボタンの値を特定の値に変更したいと考えております。
以下ソース

vue
1<template>
2    <div class="card">
3        <input type="checkbox" v-model="checkValue">
4        <br />
5        <input type="radio" id="one" value="one" v-model="radioValue" @change="changeRadio">
6        <label for="one">One</label>
7        <br>
8        <input type="radio" id="two" value="two" v-model="radioValue" @change="changeRadio">
9        <label for="two">Two</label>
10        <br>
11        <input type="radio" id="three" value="three" v-model="radioValue" @change="changeRadio">
12        <label for="three">three</label>
13    </div>
14</template>
15
16<script>
17    export default {
18        data(){
19            return {
20                checkValue : null
21                , radioValue : null
22            }
23        },
24        methods : {
25            changeRadio(){
26                if(this.checkValue){
27                    this.radioValue = 'one';
28                }
29            }
30        }
31    };
32</script>
33

このソースでは、radioボタンのchangeイベントで、
チェックボックスがチェック済みの場合は、radioボタンの値を'one'に変更するといった処理なのですが、
one以外の値を選択した場合に、radioボタンのチェック表示複数になってしまいます。
そもそもチェンジイベントで行うことがおかしいのでしょうか。

追記
要件としては、チェックボックスがチェック中の時は、ラジオボタンを非活性する方法以外で、
ラジオボタンの値を制御したいです。
非活性する方法が取れない理由としては、ラジオボタン変更時に、チェックボックスがチェック済みの場合は、
ユーザー側にアラートを出力し、元の値に戻したい為です。

ご教授をお願い致します。

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

回答1件

ベストアンサー

チェックボックスやラジオボタンでv-modelを使ってデータをバインドする場合、

v-model="radioValue" @change="changeRadio"

特に理由がない限り、上記のように@changeイベントは指定しません。

このあたりの理由はオフィシャルのドキュメントフォーム入力バインディングに詳しく載っているので読んでみてください。

仕様が『チェックボックスがチェックされたら1番目のラジオボタンをチェックする』ということであれば、watchでcheckValueプロパティを監視するという方法があります。

<input type="checkbox" v-model="checkValue" />
<br />
<input type="radio" id="one" value="one" v-model="radioValue" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="two" v-model="radioValue" />
<label for="two">Two</label>
<br />
<input type="radio" id="three" value="three" v-model="radioValue" />
<label for="three">three</label>

<script>
export default {
  data() {
    return {
      checkValue: false,
      radioValue: null
    };
  },
  watch: {
    checkValue(newVal, val) {
      if (newVal) {
        this.radioValue = "one";
      }
    }
  }
};
</script>

どうしてもmethodsで変更したいということであれば、チェックボックスの方の@changeイベントを利用すると同様のことができると思います。

<input type="checkbox" v-model="checkValue" @change="changeRadio" />

<script>
export default {
  data() {
    return {
      checkValue: false,
      radioValue: null
    };
  },
  methods: {
    changeRadio() {
      if (this.checkValue) {
        this.radioValue = "one";
      }
    }
  }
};
</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 = "変更できません";
        this.$nextTick(function() {
          this.radioValue = "one";
        });
      }
    }
  },
  watch: {
    checkValue(newVal, val) {
      if (newVal) {
        this.radioValue = "one";
      } else {
        this.radioValue = null;
        this.message = "";
      }
    }
  }
};
</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/15 09:02

編集2020/05/16 16:23

rubytomato

総合スコア1752

nepia

2020/05/15 09:17

私の日本語がおかしいですね。ラジオボタン変更時に、チェックボックスがONの場合は、ラジオボタンの値をある値に強制したいです。ですので、チェックボックスのイベントではなく、ラジオボタンを非活性以外の選択で、ラジオボタンのイベントで実装できないでしょうか。

rubytomato

2020/05/15 09:19

それはチェックボックスがonのときは、特定のラジオボタンをチェック状態にして変更できないようにしたい、ということでしょうか？

nepia

2020/05/15 09:23

画面上は、ラジオボタンの選択は可能として、特定の値以外が選択された場合は、特定の値に変更するといったことがしたいです。今回の処理の延長として、ユーザー側にアラートで変更できない旨を表示したいためです。

rubytomato

2020/05/15 09:35

チェックボックスがonのときは、ラジオボタンを非活性化するという方法以外で、ラジオボタンのチェックが行われないようにしたいという要件ですね。これだと私の回答は役に立たないですね。もう少し考えてみます。それと他の人がこの要件で回答できるように質問文に修正して頂けませんか？

nepia

2020/05/15 15:09

質問文修正させていただきました。また、回答もありがとうございます。一つ確認させて頂きたいのですが、 nextTickで値をoneに更新する理由を教えて頂いてもよろしいでしょうか。

rubytomato

2020/05/15 15:23

追記した回答では期待した動作にはならなかったのでしょうか？

nepia

2020/05/16 04:54

期待した動作になりました。ただ、nexttickを使うとうまくいのか疑問に思ったのです。

rubytomato

2020/05/16 16:33

$nextTickについては、非同期更新キューhttps://jp.vuejs.org/v2/guide/reactivity.html#%E9%9D%9E%E5%90%8C%E6%9C%9F%E6%9B%B4%E6%96%B0%E3%82%AD%E3%83%A5%E3%83%BC に詳しく書かれているので読んでみてください。特に下記に引用した部分が重要です。 > データの変更後に Vue.js の DOM 更新の完了を待つには、データが変更された直後に Vue.nextTick(callback) を使用することができます。そのコールバックは DOM が更新された後に呼ばれます。 updatedRadioメソッドで2つの更新を行っています。これらのDOM更新を別々のタイミングに分けることでブラウザの描画が正常に行われます。 1. this.radioValue = e.target.value; 2. this.radioValue = "one"; 期待した動作になったということなのでクローズをお願いします。もしnextTickの動作について、もう少し知りたいということであれば別途質問を立てるなどしてください。

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