質問編集履歴
1
画像や説明の追加
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
vuetifyのautoCompleteを使用した入力フォーム
|
body
CHANGED
|
@@ -1,20 +1,25 @@
|
|
|
1
|
+
laravelでバックエンドを構築し、vue.js/vuetifyでフロントを組んでいます。
|
|
1
|
-
|
|
2
|
+
画像のように駅を選択し、そこからの交通手段、所要時間を入力するフォームをループさせています。
|
|
2
|
-
コードは後述の通りで、これをコンポーネント化して５個表示しています。
|
|
3
3
|
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
駅の選択にはvuetifyのauto completeを使ってフォームを組んでいます。
|
|
7
|
+
コードは後述の通りで、これをコンポーネント化し、v-forで５個表示しています。
|
|
8
|
+
今回は質問の為に１つだけ表示するようにしました。
|
|
9
|
+
|
|
4
10
|
```
|
|
5
11
|
<template>
|
|
6
12
|
<v-container>
|
|
7
13
|
<v-row dense>
|
|
8
|
-
|
|
9
14
|
<v-col sm="4">
|
|
10
|
-
|
|
11
15
|
<v-autocomplete
|
|
12
16
|
v-model="model"
|
|
13
17
|
:items="stationsSon"
|
|
14
18
|
:search-input.sync="search"
|
|
19
|
+
item-text="name"
|
|
15
20
|
name="station_id[]"
|
|
16
21
|
item-value="id"
|
|
17
|
-
label=駅名（漢字入力で絞り込み
|
|
22
|
+
label=駅名（漢字入力で絞り込みOK）
|
|
18
23
|
clearable
|
|
19
24
|
hide-details
|
|
20
25
|
hide-selected
|
|
@@ -22,7 +27,7 @@
|
|
|
22
27
|
>
|
|
23
28
|
|
|
24
29
|
<template v-slot:selection="{ item,selected }">
|
|
25
|
-
<span>{{ item.routell_name + item.name }}
|
|
30
|
+
<span>{{ item.routell_name + item.name + '駅' }}</span>
|
|
26
31
|
</template>
|
|
27
32
|
|
|
28
33
|
<template v-slot:item="{ item }">
|
|
@@ -43,6 +48,7 @@
|
|
|
43
48
|
item-text="name"
|
|
44
49
|
label="交通手段"
|
|
45
50
|
outlined
|
|
51
|
+
clearable
|
|
46
52
|
>
|
|
47
53
|
</v-select>
|
|
48
54
|
</v-col>
|
|
@@ -92,17 +98,18 @@
|
|
|
92
98
|
},
|
|
93
99
|
},
|
|
94
100
|
|
|
95
|
-
created() {
|
|
96
|
-
console.log(this.stationsSon);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
101
|
};
|
|
100
102
|
</script>
|
|
101
103
|
```
|
|
102
104
|
|
|
103
|
-
ここに入力された値を受け取った時
|
|
105
|
+
ここに入力された値をdump&dieで受け取った時
|
|
104
|
-
verhicleとtake_timeは
|
|
106
|
+
verhicleとtake_timeは配列で意図したように動いています。
|
|
105
|
-
しかし何故かstationのところだけarrayが
|
|
107
|
+
しかし何故かstationのところだけarrayが２倍になって返ってきます（以下の画像のような形）
|
|
108
|
+
増やすと奇数箇所（0含む）のところはnullが返ってきており、偶数箇所に値が入っているようです。
|
|
106
109
|
|
|
110
|
+
|
|
111
|
+
|
|
107
|
-
vuetifyの仕様なのかもしれませんが
|
|
112
|
+
これはvuetifyのautoCompleteの仕様なのかもしれませんが
|
|
113
|
+
順番にDBに入れたいので、順番通りの配列にしたいです。
|
|
114
|
+
|
|
108
115
|
ご回答よろしくお願い致します。
|