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

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

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

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

Q&A

解決済

1回答

3318閲覧

Vue.js checkboxのチェックを外す

kaori_luna

総合スコア14

Vue.js

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

0グッド

0クリップ

投稿2019/07/23 09:27

編集2019/07/23 14:44

Vue.jsでラジオの選んだ値
のチェックボックスのチェックが外れて、チェックボックスも無効にします。
下記の書き方はうまく動きましたが、
セッションがある場合は、全部checkbox checkedが外れてしまいました。
この場合はどうしたほうがいいでしょうか?

<ul class ="RadioBlock"> <li> <input id="fruit1" class="inputRadio" checked="checked" v-model="fruit_type" name="fruit_type" type="radio" value="1">orange </li> <li> <input id="fruit2" class="inputRadio" name="fruit_type" v-model="fruit_type" type="radio" value="2">banana </li> </ul> <ul class ="CheckBlock"> <li> <input id="fruit1" class="inputRadio" checked="checked" v-model="fruit_type" name="fruit_type" type="radio" value="1">orange </li> <li> <input id="fruit2" class="inputRadio" name="fruit_type" v-model="fruit_type" type="radio" value="2">banana </li> </ul> <ul class="RadioBlock"> <li> <input id="fruit_type_option1" class="inputRadio" checked="checked" :checked="fruit_type ==1 ? false : ''" name="contract_type_optional[]" type="checkbox" value="1" :disabled="fruit_type == 1" name="fruit_type" type="radio" value="1">orange </li> <li> <input id="fruit_type_option2" class="inputRadio" name="fruit_type" :checked="fruit_type ==2 ? false : ''" name="contract_type_optional[]" type="checkbox" value="2" :disabled="fruit_type == 2" type="radio" value="2">banana </li> <ul>

Vue.js

let app = new Vue({ el: "#app", data: { fruit_type:1, fruit_type_optional:[], errors:{} }, created:function () { let count_data = 0; for (let key in old_data) { if (old_data[key] != null && old_data[key] != "") { count_data += 1; } } if (count_data > 0) { for (let key in old_data) { this.$set(this, key, old_data[key]); } } else { let that = this; axios.get('api/getSession') .then(res => { Object.entries(res.data).map(function (data) { console.log(data[0], data[1]); if(data[0]!= '_token') { that.$set(that, data[0], data[1]); } }); }) .catch(error => { this.message = 'データの取得に失敗しました。'; }); } }, } });

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

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

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

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

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

yasutomi

2019/07/23 11:26

Vue.jsの質問ならJavaScriptのコードの記載もお願いします。
kaori_luna

2019/07/23 14:44

ありがとうございます。JavaScriptのコードを追加しました。
guest

回答1

0

自己解決

解決方法:
セッションがあるかどうか判断して、変数の値を設定。
$test = 'false';
sessionがあれば、 $test = 'true';

<input id="fruit_type_option1" class="inputRadio" checked="checked" :checked="fruit_type ==1 ? false : $test'" name="contract_type_optional[]" type="checkbox" value="1" :disabled="fruit_type == 1" name="fruit_type" type="radio" value="1">orange

投稿2019/07/24 01:58

kaori_luna

総合スコア14

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問