質問するログイン新規登録

Q&A

0回答

3010閲覧

vuetifyのautoCompleteを使用した入力フォーム

tktail

総合スコア72

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2020/12/09 08:17

編集2020/12/10 06:57

0

0

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に入れたいので、順番通りの配列にしたいです。

ご回答よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問