laravelでバックエンドを構築し、vue.js/vuetifyでフロントを組んでいます。
画像のように駅を選択し、そこからの交通手段、所要時間を入力するフォームをループさせています。
駅の選択にはvuetifyのauto completeを使ってフォームを組んでいます。
コードは後述の通りで、これをコンポーネント化し、v-forで5個表示しています。
今回は質問の為に1つだけ表示するようにしました。
<template> <v-container> <v-row dense> <v-col sm="4"> <v-autocomplete v-model="model" :items="stationsSon" :search-input.sync="search" item-text="name" name="station_id[]" item-value="id" label=駅名(漢字入力で絞り込みOK) clearable hide-details hide-selected outlined > <template v-slot:selection="{ item,selected }"> <span>{{ item.routell_name + item.name + '駅' }}</span> </template> <template v-slot:item="{ item }"> <v-list-item-content> <v-list-item-title v-text="item.name"></v-list-item-title> <v-list-item-subtitle v-text="item.routell_name"></v-list-item-subtitle> </v-list-item-content> </template> </v-autocomplete> </v-col> <v-col sm="4"> <v-select name="verhicle_id[]" :items="verhiclesSon" item-value="id" item-text="name" label="交通手段" outlined clearable > </v-select> </v-col> <v-col sm="4"> <v-text-field name="take_time[]" type="number" :rules="[v => v && v.length <= 2 || 'Warn:2字以内']" label="99分以内" outlined > </v-text-field> </v-col> </v-row> </v-container> </template> <script> export default { data: () => ({ stationsDefault: [], model: null, search: null, tab: null, }), watch: { model (val) { if (val != null) this.tab = 0; else this.tab = null; }, search (val) { if (this.stationsDefault.length > 0) return; }, }, props:{ stationsSon:{ type: Array }, verhiclesSon:{ type: Array }, }, }; </script>
ここに入力された値をdump&dieで受け取った時
verhicleとtake_timeは配列で意図したように動いています。
しかし何故かstationのところだけarrayが2倍になって返ってきます(以下の画像のような形)
増やすと奇数箇所(0含む)のところはnullが返ってきており、偶数箇所に値が入っているようです。
これはvuetifyのautoCompleteの仕様なのかもしれませんが
順番にDBに入れたいので、順番通りの配列にしたいです。
ご回答よろしくお願い致します。
あなたの回答
tips
プレビュー