質問編集履歴
2
削除
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -226,8 +226,6 @@
|
|
|
226
226
|
|
|
227
227
|
prefectureMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
228
228
|
|
|
229
|
-
mostMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
230
|
-
|
|
231
229
|
}
|
|
232
230
|
|
|
233
231
|
},
|
1
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -114,4 +114,160 @@
|
|
|
114
114
|
|
|
115
115
|
|
|
116
116
|
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
<======================================▼7/22追記==========================================>
|
|
120
|
+
|
|
121
|
+
※zackey2さんありがとうございました！
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
### 新たな課題
|
|
126
|
+
|
|
127
|
+
①確定押下時、["複数選択","複数選択"]と、配列のまま文字列が表示されるため、
|
|
128
|
+
|
|
129
|
+
[]"を抜いて表示させたい（正規表現で試してみるも、TypeError: this.selected.replace is not a function）
|
|
130
|
+
|
|
131
|
+
②関東、東京などのデータは、サーバーサイドからAPIが返ってくることを想定していますが、今のままの実装でも流用可能でしょうか？
|
|
132
|
+
|
|
133
|
+
areaMap: { kanto: '関東', kansai: '関西' },
|
|
134
|
+
|
|
135
|
+
prefectureMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
136
|
+
|
|
137
|
+
上記のあたりは、裏側のデータを持ってきつつ同じだけのデータ量をフロント側で用意してあげなければいけないため難しいのではないか
|
|
138
|
+
|
|
139
|
+
と感じている。
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
```vue
|
|
144
|
+
|
|
145
|
+
<div>
|
|
146
|
+
|
|
147
|
+
<p>{{ displaySelectR}}</p>
|
|
148
|
+
|
|
149
|
+
<p>{{ displaySelectC }}</p>
|
|
150
|
+
|
|
151
|
+
<p>{{ displaySelectM }}</p>
|
|
152
|
+
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
<ul>
|
|
158
|
+
|
|
159
|
+
<li @click="onSelectR('kanto')">関東</li>
|
|
160
|
+
|
|
161
|
+
<ul v-show="selectR === 'kanto'">
|
|
162
|
+
|
|
163
|
+
<li @click="onSelectC('tokyo')">東京</li>
|
|
164
|
+
|
|
165
|
+
<div v-show="selectC === 'tokyo'">
|
|
166
|
+
|
|
167
|
+
<input type="checkbox" v-model="selected" value="複数選択１">複数選択
|
|
168
|
+
|
|
169
|
+
<input type="checkbox" v-model="selected" value="複数選択２">複数選択
|
|
170
|
+
|
|
171
|
+
<input type="checkbox" v-model="selected" value="複数選択３">複数選択
|
|
172
|
+
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<li @click="onSelectC('kanagawa')">神奈川</li>
|
|
176
|
+
|
|
177
|
+
<div v-show="selectC === 'kanagawa'">
|
|
178
|
+
|
|
179
|
+
<input type="checkbox">複数選択
|
|
180
|
+
|
|
181
|
+
<input type="checkbox">複数選択
|
|
182
|
+
|
|
183
|
+
<input type="checkbox">複数選択
|
|
184
|
+
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<li @click="onSelectC('saitama')">埼玉</li>
|
|
188
|
+
|
|
189
|
+
<div v-show="selectC === 'saitama'">
|
|
190
|
+
|
|
191
|
+
<input type="checkbox">複数選択
|
|
192
|
+
|
|
193
|
+
<input type="checkbox">複数選択
|
|
194
|
+
|
|
195
|
+
<input type="checkbox">複数選択
|
|
196
|
+
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
</ul>
|
|
200
|
+
|
|
201
|
+
</ul>
|
|
202
|
+
|
|
203
|
+
<button @click="confilm">確定</button>
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
---以下script
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
data() {
|
|
212
|
+
|
|
213
|
+
return {
|
|
214
|
+
|
|
215
|
+
selectR: '',
|
|
216
|
+
|
|
217
|
+
selectC: '',
|
|
218
|
+
|
|
219
|
+
displaySelectR: '',
|
|
220
|
+
|
|
221
|
+
displaySelectC: '',
|
|
222
|
+
|
|
223
|
+
displaySelectM: '',
|
|
224
|
+
|
|
225
|
+
areaMap: { kanto: '関東', kansai: '関西' },
|
|
226
|
+
|
|
227
|
+
prefectureMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
228
|
+
|
|
229
|
+
mostMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
230
|
+
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
},
|
|
234
|
+
|
|
235
|
+
methods: {
|
|
236
|
+
|
|
237
|
+
onSelectR(e) {
|
|
238
|
+
|
|
239
|
+
this.selectR = e;
|
|
240
|
+
|
|
241
|
+
},
|
|
242
|
+
|
|
243
|
+
onSelectC(e) {
|
|
244
|
+
|
|
245
|
+
this.selectC = e;
|
|
246
|
+
|
|
247
|
+
},
|
|
248
|
+
|
|
249
|
+
confilm() {
|
|
250
|
+
|
|
251
|
+
const selectedStr = this.selected.replace(/["[]]/g, '');
|
|
252
|
+
|
|
253
|
+
this.displaySelectR = this.areaMap[this.selectR];
|
|
254
|
+
|
|
255
|
+
this.displaySelectC = this.prefectureMap[this.selectC];
|
|
256
|
+
|
|
257
|
+
this.displaySelectM = selectedStr;
|
|
258
|
+
|
|
259
|
+
// 削除処理
|
|
260
|
+
|
|
261
|
+
this.selectR = '';
|
|
262
|
+
|
|
263
|
+
this.selectC = '';
|
|
264
|
+
|
|
265
|
+
this.selectM = '';
|
|
266
|
+
|
|
267
|
+
},
|
|
268
|
+
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
|
|
117
273
|
よろしくお願い致します。
|