質問編集履歴

2

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

2021/04/14 03:46

投稿

hafmk
hafmk

スコア9

test CHANGED
File without changes
test CHANGED
@@ -95,3 +95,85 @@
95
95
  ◆参考にしてみたサイト(JavaScript初心者のためうまく実装できませんでした)
96
96
 
97
97
  [JavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】](https://hirakublog.com/code/351/)
98
+
99
+
100
+
101
+
102
+
103
+ ### hatena19様の回答をもとに修正
104
+
105
+ **追加で教えていただきたいこと:**
106
+
107
+ ・v-forでラベルに一覧表示しているラジオボタンの色が、選択しても変わらない(動かない)
108
+
109
+ ・クリックして色が変わるように修正したい
110
+
111
+
112
+
113
+ ```ここに言語を入力
114
+
115
+ <!-- 前画面で取得(josn)した企業名を表示 -->
116
+
117
+ <div class="item">
118
+
119
+ <div
120
+
121
+ v-for="object in data.loginListData"
122
+
123
+ :key="object.label"
124
+
125
+ class="btnBlock"
126
+
127
+ @click="isFocus(object)"
128
+
129
+ >
130
+
131
+ <input
132
+
133
+ :id="object.id"
134
+
135
+ v-model="form.search_kigyo"
136
+
137
+ type="radio"
138
+
139
+ name="search_kigyo"
140
+
141
+ class="input_radio_toggle_w-300px "
142
+
143
+ :value="object.value"
144
+
145
+
146
+
147
+ />
148
+
149
+ <label :for="object.id">{{ object.kigyomei }}</label>
150
+
151
+ </div>
152
+
153
+ </div>
154
+
155
+ ```
156
+
157
+ **うまくいかない原因かなと思っていること:**
158
+
159
+
160
+
161
+ いただいたリンクをもとに、以下のようにv-for内を記載すると、ラジオボタンの色は動くようになりますが、ここで呼び出している「data.loginListData」は、前画面からの情報をstrageに保存したものを呼び出しているため、頂いたリンクの通り固定のデータを指定できません。このような場合、どのように記述すればよろしいのでしょうか、、、、。
162
+
163
+ ```ここに言語を入力
164
+
165
+ <div
166
+
167
+ v-for="object in [
168
+
169
+ { id: 'search_hyojiflag_2', label: 'すべて', value: '2' },
170
+
171
+ { id: 'search_hyojiflag_1', label: '表示のみ', value: '1' },
172
+
173
+ { id: 'search_hyojiflag_0', label: '非表示のみ', value: '0' },
174
+
175
+ ]"
176
+
177
+ ```
178
+
179
+ ![イメージ説明](a9b6cac5a1cf592b3dda9a4c51b23ffb.png)

1

UI画像の追加

2021/04/14 03:46

投稿

hafmk
hafmk

スコア9

test CHANGED
File without changes
test CHANGED
@@ -15,6 +15,8 @@
15
15
  (色を保持するタイミングは、他のボタン要素をクリックするまでの間)
16
16
 
17
17
  が、ボタン要素以外の背景をクリックすると色の保持が外れます。
18
+
19
+ ![イメージ説明](2f74ae3c7208d76eb1d469e329cb38b2.png)
18
20
 
19
21
 
20
22