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

質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.30%
Vue.js

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

Vuetify.js

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

Q&A

解決済

1回答

1507閲覧

Vuetifyで選択した複数のチェックボックスの値を配列に格納したい

Khy

総合スコア118

Vue.js

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

Vuetify.js

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

0グッド

0クリップ

投稿2019/06/01 12:54

編集2019/06/01 13:15

0

0

Vue.jsとVuetify.jsでWebアプリを制作しております。

チェックボックスで選択した都道府県名を配列に格納したいのですが、どうすればいいか分かりません。
都道府県の選択肢はinputの下に出すのではなくダイアログで出したいです。
prefectureItemsから都道府県を選択し、prefectureSelectedに格納したいです。

試行錯誤して以下のようなコードを作って見たのですが、これでは選択に応じてtrue、falseなどのboolean値が入ってしまいます。

お力を貸していただけると助かります。

<template> <!-- 都道府県検索 --> <v-layout row justify-center> <v-dialog v-model="dialog" scrollable max-width="300px"> <template v-slot:activator="{ on }"> <v-text-field prepend-inner-icon="place" append-icon="arrow_drop_down" v-on="on" placeholder="募集地域" @click="dialog = true;" :value="prefectureSelected"> </v-text-field> </template> <v-card> <v-card-text> <v-checkbox v-for="(item, index) in prefectureItems" :key="item" v-model="prefectureItems[index]" :label="item"> </v-checkbox> </v-card-text> <v-divider></v-divider> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue darken-1" flat @click="dialog = false">OK</v-btn> </v-card-actions> </v-card> </v-dialog> </v-layout> </template> <script> export default{ data(){ return{ dialog: false, prefectureSelected: [], //ここに選んだ都道府県名を入れていきたいです。 prefectureItems: [ '全国','北海道','青森','岩手','宮城','秋田','山形','福島','茨城','栃木','群馬','埼玉','千葉','東京','神奈川','新潟','富山','石川','福井','山梨','長野','岐阜','静岡','愛知','三重','滋賀','京都','大阪','兵庫','奈良','和歌山','鳥取','島根','岡山','広島','山口','徳島','香川','愛媛','高知','福岡','佐賀','長崎','熊本','大分','宮崎','鹿児島','沖縄', ], } } } </script>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

methodsなどを使用して解決しました。

投稿2019/06/02 13:17

Khy

総合スコア118

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.30%

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

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

質問する

関連した質問