質問編集履歴
1
画像や説明の追加
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
vue
|
|
1
|
+
vuetifyのautoCompleteを使用した入力フォーム
|
test
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
|
+
laravelでバックエンドを構築し、vue.js/vuetifyでフロントを組んでいます。
|
|
2
|
+
|
|
3
|
+
画像のように駅を選択し、そこからの交通手段、所要時間を入力するフォームをループさせています。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
1
|
-
vuetifyのauto completeを使ってフォームを組んでいます。
|
|
11
|
+
駅の選択にはvuetifyのauto completeを使ってフォームを組んでいます。
|
|
2
|
-
|
|
12
|
+
|
|
3
|
-
コードは後述の通りで、これをコンポーネント化し
|
|
13
|
+
コードは後述の通りで、これをコンポーネント化し、v-forで５個表示しています。
|
|
14
|
+
|
|
15
|
+
今回は質問の為に１つだけ表示するようにしました。
|
|
4
16
|
|
|
5
17
|
|
|
6
18
|
|
|
@@ -12,12 +24,8 @@
|
|
|
12
24
|
|
|
13
25
|
<v-row dense>
|
|
14
26
|
|
|
15
|
-
|
|
16
|
-
|
|
17
27
|
<v-col sm="4">
|
|
18
28
|
|
|
19
|
-
|
|
20
|
-
|
|
21
29
|
<v-autocomplete
|
|
22
30
|
|
|
23
31
|
v-model="model"
|
|
@@ -26,11 +34,13 @@
|
|
|
26
34
|
|
|
27
35
|
:search-input.sync="search"
|
|
28
36
|
|
|
37
|
+
item-text="name"
|
|
38
|
+
|
|
29
39
|
name="station_id[]"
|
|
30
40
|
|
|
31
41
|
item-value="id"
|
|
32
42
|
|
|
33
|
-
label=駅名（漢字入力で絞り込み
|
|
43
|
+
label=駅名（漢字入力で絞り込みOK）
|
|
34
44
|
|
|
35
45
|
clearable
|
|
36
46
|
|
|
@@ -46,7 +56,7 @@
|
|
|
46
56
|
|
|
47
57
|
<template v-slot:selection="{ item,selected }">
|
|
48
58
|
|
|
49
|
-
<span>{{ item.routell_name + item.name }}
|
|
59
|
+
<span>{{ item.routell_name + item.name + '駅' }}</span>
|
|
50
60
|
|
|
51
61
|
</template>
|
|
52
62
|
|
|
@@ -88,6 +98,8 @@
|
|
|
88
98
|
|
|
89
99
|
outlined
|
|
90
100
|
|
|
101
|
+
clearable
|
|
102
|
+
|
|
91
103
|
>
|
|
92
104
|
|
|
93
105
|
</v-select>
|
|
@@ -186,14 +198,6 @@
|
|
|
186
198
|
|
|
187
199
|
|
|
188
200
|
|
|
189
|
-
created() {
|
|
190
|
-
|
|
191
|
-
console.log(this.stationsSon);
|
|
192
|
-
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
201
|
};
|
|
198
202
|
|
|
199
203
|
</script>
|
|
@@ -202,14 +206,24 @@
|
|
|
202
206
|
|
|
203
207
|
|
|
204
208
|
|
|
205
|
-
ここに入力された値を受け取った時
|
|
209
|
+
ここに入力された値をdump&dieで受け取った時
|
|
206
|
-
|
|
210
|
+
|
|
207
|
-
verhicleとtake_timeは
|
|
211
|
+
verhicleとtake_timeは配列で意図したように動いています。
|
|
208
|
-
|
|
212
|
+
|
|
209
|
-
しかし何故かstationのところだけarrayが
|
|
213
|
+
しかし何故かstationのところだけarrayが２倍になって返ってきます（以下の画像のような形）
|
|
214
|
+
|
|
210
|
-
|
|
215
|
+
増やすと奇数箇所（0含む）のところはnullが返ってきており、偶数箇所に値が入っているようです。
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
211
|
-
|
|
219
|
+
|
|
212
|
-
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
|
|
213
|
-
vuetifyの仕様なのかもしれませんが
|
|
223
|
+
これはvuetifyのautoCompleteの仕様なのかもしれませんが
|
|
224
|
+
|
|
225
|
+
順番にDBに入れたいので、順番通りの配列にしたいです。
|
|
226
|
+
|
|
227
|
+
|
|
214
228
|
|
|
215
229
|
ご回答よろしくお願い致します。
|