質問編集履歴
2
削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -112,7 +112,6 @@
|
|
|
112
112
|
displaySelectM: '',
|
|
113
113
|
areaMap: { kanto: '関東', kansai: '関西' },
|
|
114
114
|
prefectureMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
115
|
-
mostMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
116
115
|
}
|
|
117
116
|
},
|
|
118
117
|
methods: {
|
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -56,4 +56,82 @@
|
|
|
56
56
|
},
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
+
|
|
60
|
+
<======================================▼7/22追記==========================================>
|
|
61
|
+
※zackey2さんありがとうございました！
|
|
62
|
+
|
|
63
|
+
### 新たな課題
|
|
64
|
+
①確定押下時、["複数選択","複数選択"]と、配列のまま文字列が表示されるため、
|
|
65
|
+
[]"を抜いて表示させたい（正規表現で試してみるも、TypeError: this.selected.replace is not a function）
|
|
66
|
+
②関東、東京などのデータは、サーバーサイドからAPIが返ってくることを想定していますが、今のままの実装でも流用可能でしょうか？
|
|
67
|
+
areaMap: { kanto: '関東', kansai: '関西' },
|
|
68
|
+
prefectureMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
69
|
+
上記のあたりは、裏側のデータを持ってきつつ同じだけのデータ量をフロント側で用意してあげなければいけないため難しいのではないか
|
|
70
|
+
と感じている。
|
|
71
|
+
|
|
72
|
+
```vue
|
|
73
|
+
<div>
|
|
74
|
+
<p>{{ displaySelectR}}</p>
|
|
75
|
+
<p>{{ displaySelectC }}</p>
|
|
76
|
+
<p>{{ displaySelectM }}</p>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<ul>
|
|
80
|
+
<li @click="onSelectR('kanto')">関東</li>
|
|
81
|
+
<ul v-show="selectR === 'kanto'">
|
|
82
|
+
<li @click="onSelectC('tokyo')">東京</li>
|
|
83
|
+
<div v-show="selectC === 'tokyo'">
|
|
84
|
+
<input type="checkbox" v-model="selected" value="複数選択１">複数選択
|
|
85
|
+
<input type="checkbox" v-model="selected" value="複数選択２">複数選択
|
|
86
|
+
<input type="checkbox" v-model="selected" value="複数選択３">複数選択
|
|
87
|
+
</div>
|
|
88
|
+
<li @click="onSelectC('kanagawa')">神奈川</li>
|
|
89
|
+
<div v-show="selectC === 'kanagawa'">
|
|
90
|
+
<input type="checkbox">複数選択
|
|
91
|
+
<input type="checkbox">複数選択
|
|
92
|
+
<input type="checkbox">複数選択
|
|
93
|
+
</div>
|
|
94
|
+
<li @click="onSelectC('saitama')">埼玉</li>
|
|
95
|
+
<div v-show="selectC === 'saitama'">
|
|
96
|
+
<input type="checkbox">複数選択
|
|
97
|
+
<input type="checkbox">複数選択
|
|
98
|
+
<input type="checkbox">複数選択
|
|
99
|
+
</div>
|
|
100
|
+
</ul>
|
|
101
|
+
</ul>
|
|
102
|
+
<button @click="confilm">確定</button>
|
|
103
|
+
|
|
104
|
+
---以下script
|
|
105
|
+
|
|
106
|
+
data() {
|
|
107
|
+
return {
|
|
108
|
+
selectR: '',
|
|
109
|
+
selectC: '',
|
|
110
|
+
displaySelectR: '',
|
|
111
|
+
displaySelectC: '',
|
|
112
|
+
displaySelectM: '',
|
|
113
|
+
areaMap: { kanto: '関東', kansai: '関西' },
|
|
114
|
+
prefectureMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
115
|
+
mostMap: { tokyo: '東京', saitama: '埼玉', kanagawa: '神奈川' },
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
methods: {
|
|
119
|
+
onSelectR(e) {
|
|
120
|
+
this.selectR = e;
|
|
121
|
+
},
|
|
122
|
+
onSelectC(e) {
|
|
123
|
+
this.selectC = e;
|
|
124
|
+
},
|
|
125
|
+
confilm() {
|
|
126
|
+
const selectedStr = this.selected.replace(/["[]]/g, '');
|
|
127
|
+
this.displaySelectR = this.areaMap[this.selectR];
|
|
128
|
+
this.displaySelectC = this.prefectureMap[this.selectC];
|
|
129
|
+
this.displaySelectM = selectedStr;
|
|
130
|
+
// 削除処理
|
|
131
|
+
this.selectR = '';
|
|
132
|
+
this.selectC = '';
|
|
133
|
+
this.selectM = '';
|
|
134
|
+
},
|
|
135
|
+
```
|
|
136
|
+
|
|
59
137
|
よろしくお願い致します。
|