質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3090閲覧

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

nepia

総合スコア30

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/15 06:14

編集2020/05/15 15:02

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

今回、特定の条件の場合において、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ボタンのチェック表示複数になってしまいます。
そもそもチェンジイベントで行うことがおかしいのでしょうか。

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

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

<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の動作について、もう少し知りたいということであれば別途質問を立てるなどしてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問