【Vue × Firestore】v-forにてリスト化し、選択されたものをFirestoreにデータを格納されるようにしたいです。

⑴v-forにてリスト化し、選択されたものをFirestoreにデータを格納されるようにしたいです。

現在VueとFirebaseにてポートフォリオを作成しているものです。

アクション〜戦争まで５つジャンルをセレクトボックスにて選ばれたものをFirestoreに格納したく、
今回、コードは下記のように作り実装を試みましたが、上手くFirestoreにデータが格納されませんでした。

selectタグにv-bindを入れないといけないのかなと思い入れてみましたが、上手くいかず
どうやったら上手く実現できるのか分からず困っています。

⑵セレクトボックスが選択されていない時、下記のような感じで「ジャンルを選択」と記載したいです。

また、現状セレクトボックスにてジャンルを選択していないのに、
一番上にあるアクションが勝手に選択されている状況になります。

セレクトボックスが選択されていない時、このような感じで「ジャンルを選択」と記載したいです。

 <option class="post-item" value="好きなジャンル" hidden>ジャンルを選択</option>

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願いいたいします。

実際のコードが下記になります。

HTML
1<select name="好きなジャンル">
2  <option v-for="genre in genres" :value="genre.name":key="genre.id" class="post-item">
3   {{ genre.name }}
4  </option>
5</select>

js
1
2<script>
3import firebase from "firebase";
4
5export default {
6  data() {
7    return {
8      db: null,
9      genre: "",
10      genres: [
11        { id: 1, name: "アクション" },
12        { id: 2, name: "ドラマ" },
13        { id: 3, name: "恋愛" },
14        { id: 4, name: "ホラー" },
15        { id: 5, name: "戦争" },
16      ],
17    };
18  },
19  components: {
20    Header,
21  },
22  methods: {
23    postItem() {
24      firebase
25        .firestore()
26        .collection("posts")
27        .add({
28          title: this.title,
29          description: this.description,
30          image: this.image,
31          genre: this.genre,
32          time: firebase.firestore.FieldValue.serverTimestamp(),
33          //サーバ側で値設定
34        });
35  },
36};
37</script>

行動規範の内容に同意します

回答1件

ベストアンサー

(1)v-forにてリスト化し、選択されたものをFirestoreにデータを格納されるようにしたいです。

問題を切り分けましょう。
「select要素で選択されたものを取得する」「Firestoreにデータを格納する」は別の問題です。
・ボタンが押されたとき、select要素で選択されたものを取得するだけのプログラム
・ボタンが押されたとき、Firestoreに固定値データを格納するだけのプログラム
を作ってみましょう。
それぞれが実現できることが確認できたら、それを組み合わせて「v-forにてリスト化し、選択されたものをFirestoreにデータを格納されるプログラム」を作りましょう。

(2)セレクトボックスが選択されていない時、下記のような感じで「ジャンルを選択」と記載したいです。

セレクトボックスを「選択されていない状態」にすると、空白が表示されます。
以下のように、１番目に「ジャンルを選択」のアイテムを置くのがよいと思います。

html
1<select name="好きなジャンル">
2  <option class="post-item" value="好きなジャンル" hidden>ジャンルを選択</option>
3  <option v-for="genre in genres" :value="genre.name":key="genre.id" class="post-item">
4   {{ genre.name }}
5  </option>
6</select>

投稿2021/04/16 12:59

ku__ra__ge

総合スコア4524

TMTN

2021/04/17 05:38

ご回答ありがとうございます。 ⑴につきまして、アドバイスいただきありがとうございます。・ボタンが押されたとき、Firestoreに固定値データを格納するだけのプログラムは実装できていますので、・ボタンが押されたとき、select要素で選択されたものを取得するだけのプログラムを考えてみます。ありがとうございます。 ⑵につきましては、実装できました。本当にありがとうございました。