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>

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。