teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

回答でいただいたコードをもとに変更

2021/04/14 03:46

投稿

hafmk
hafmk

スコア9

title CHANGED
File without changes
body CHANGED
@@ -46,4 +46,45 @@
46
46
  実現方法に特に指定はありませんが、jQuery以外の方法がうれしいです。
47
47
 
48
48
  ◆参考にしてみたサイト(JavaScript初心者のためうまく実装できませんでした)
49
- [JavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】](https://hirakublog.com/code/351/)
49
+ [JavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】](https://hirakublog.com/code/351/)
50
+
51
+
52
+ ### hatena19様の回答をもとに修正
53
+ **追加で教えていただきたいこと:**
54
+ ・v-forでラベルに一覧表示しているラジオボタンの色が、選択しても変わらない(動かない)
55
+ ・クリックして色が変わるように修正したい
56
+
57
+ ```ここに言語を入力
58
+ <!-- 前画面で取得(josn)した企業名を表示 -->
59
+ <div class="item">
60
+ <div
61
+ v-for="object in data.loginListData"
62
+ :key="object.label"
63
+ class="btnBlock"
64
+ @click="isFocus(object)"
65
+ >
66
+ <input
67
+ :id="object.id"
68
+ v-model="form.search_kigyo"
69
+ type="radio"
70
+ name="search_kigyo"
71
+ class="input_radio_toggle_w-300px "
72
+ :value="object.value"
73
+
74
+ />
75
+ <label :for="object.id">{{ object.kigyomei }}</label>
76
+ </div>
77
+ </div>
78
+ ```
79
+ **うまくいかない原因かなと思っていること:**
80
+
81
+ いただいたリンクをもとに、以下のようにv-for内を記載すると、ラジオボタンの色は動くようになりますが、ここで呼び出している「data.loginListData」は、前画面からの情報をstrageに保存したものを呼び出しているため、頂いたリンクの通り固定のデータを指定できません。このような場合、どのように記述すればよろしいのでしょうか、、、、。
82
+ ```ここに言語を入力
83
+ <div
84
+ v-for="object in [
85
+ { id: 'search_hyojiflag_2', label: 'すべて', value: '2' },
86
+ { id: 'search_hyojiflag_1', label: '表示のみ', value: '1' },
87
+ { id: 'search_hyojiflag_0', label: '非表示のみ', value: '0' },
88
+ ]"
89
+ ```
90
+ ![イメージ説明](a9b6cac5a1cf592b3dda9a4c51b23ffb.png)

1

UI画像の追加

2021/04/14 03:46

投稿

hafmk
hafmk

スコア9

title CHANGED
File without changes
body CHANGED
@@ -7,6 +7,7 @@
7
7
  選択したA(またはB)の色を変更し、色を保持するところまではできました。
8
8
  (色を保持するタイミングは、他のボタン要素をクリックするまでの間)
9
9
  が、ボタン要素以外の背景をクリックすると色の保持が外れます。
10
+ ![イメージ説明](2f74ae3c7208d76eb1d469e329cb38b2.png)
10
11
 
11
12
 
12
13
  ```ここに言語を入力