Vue.jsにてボタンを押したらFirestoreにデータを格納したいです。

ボタンを押したらFirestoreにデータを格納したいです。

プログラミンを勉強し始めて約４ヶ月。Vue.jsを勉強し始めて、約1ヶ月程度のものです。

現在「Vue.js」×「Firestore」でポートフォリオを作成中なのですが、
Firestoreとの連携が分からず行き詰まってしまっております。

Firestoreのデータベースでは
コレクションに「posts」を作成
ドキュメントに「title」「description」「time」「genre」を作成してます。

実装したい事は下記になります。

⑴投稿ボタンを押したらFirestoreにデータを格納したいです。
ネットで調べながらやってみましたが実装できない状況です。。

 <button class="btn" @click.prevent="postItem">投稿</button>

⑵画像をファイル選択出来る機能と、その画像をFirestoreにデータを格納出来るようにしたいです。。

<img class="item-img" src="../assets/画像.jpg" alt="画像" />
 <input type="text" class="post-item" v-model="image" />
 <button class="btn-img">画像選択</button>

勉強し始めたばかりなので至らぬ点が多いかとお思いますが、
どこをどう直したら良いかご教授いただけると幸いです。
宜しくお願い致します。

該当のソースコード

html
1<template>
2  <div id="app">
3    <Header />
4    <div class="post-inner flex">
5      <h2 class="post-tll flex">cinemaを投稿する</h2>
6      <hr class="separate" />
7
8      <div class="post-items flex">
9        <div class="post-contens flex">
10          <img class="item-img" src="../assets/タイトル.jpg" alt="タイトル" />
11          <input type="text" class="post-item blank" placeholder="タイトル" v-model="title" />
12        </div>
13        <div class="post-contens flex">
14          <img class="item-img" src="../assets/自己紹介.jpg" alt="説明" />
15          <input type="text" class="post-item" placeholder="説明" v-model="description" />
16        </div>
17        <div class="post-contens post-img flex">
18          <img class="item-img" src="../assets/画像.jpg" alt="画像" />
19          <input type="text" class="post-item" v-model="image" />
20          <button class="btn-img">画像選択</button>
21        </div>
22        <div class="post-contens flex">
23          <img class="item-img" src="../assets/好きなジャンル.jpg" alt="好きなジャンル" />
24          <select name="好きなジャンル">
25            <option class="post-item" value="好きなジャンル" hidden>ジャンル</option>
26            <option class="post-item" value="アクション">アクション</option>
27            <option class="post-item" value="ドラマ">ドラマ</option>
28            <option class="post-item" value="恋愛">恋愛</option>
29            <option class="post-item" value="ホラー">ホラー</option>
30          </select>
31        </div>
32        <button class="btn" @click.prevent="postItem">投稿</button>
33      </div>
34    </div>
35  </div>
36</template>

js
1<script>
2import firebase from "firebase";
3import Header from "@/components/header.vue";
4
5export default {
6  data() {
7    return {
8      db: null,
9      title: "",
10      description: "",
11      image: "",
12      genre: ""
13    };
14  },
15  components: {
16    Header
17  },
18  created() {
19    this.db = firebase.firestore().collection("posts");
20    // dbインスタンスを初期化して"posts"という名前のコレクションへの参照を作成
21  },
22  methods: {
23    postItem() {
24      this.db.collection("posts").add({
25        title: this.title,
26        description: this.description,
27        image: this.image,
28        genre: this.genre
29      });
30    }
31  }
32};
33</script>

css
1<style scoped lang="scss">
2a {
3  text-decoration: none;
4}
5
6select {
7  width: 15rem;
8  outline: none;
9  border: none;
10  font-size: 1rem;
11  color: #444;
12  height: 2.5rem;
13  border-bottom: 1px solid #ddd;
14}
15
16::placeholder {
17  color: #444;
18  font-size: 1rem;
19  padding-left: 0.25rem;
20}
21
22.flex {
23  display: flex;
24  justify-content: center;
25  align-items: center;
26}
27
28.post-inner {
29  width: 100%;
30  height: 90vh;
31  flex-direction: column;
32  .post-tll {
33    width: 80%;
34    padding-top: 2rem;
35  }
36}
37.post-items {
38  flex-direction: column;
39  .post-contens {
40    position: relative;
41    margin: 0.8rem;
42    .item-img {
43      width: 35px;
44      height: 35px;
45      margin-right: 0.8rem;
46    }
47    .post-item {
48      width: 15rem;
49      outline: none;
50      border: none;
51      height: 2.5rem;
52      border-bottom: 1px solid #ddd;
53      color: #444;
54      font-size: 1rem;
55    }
56  }
57  .btn {
58    width: 5rem;
59    margin: 2rem;
60    color: #fff;
61    background-color: #06baf1;
62    padding: 0.5rem;
63    border-radius: 1rem;
64    text-decoration: none;
65    cursor: pointer;
66    cursor: hand;
67    border: none;
68    outline: none;
69    font-weight: bold;
70  }
71}
72
73hr.separate {
74  width: 60%;
75  display: block;
76  height: 0;
77  border: 0;
78  border-top: 1px solid #3a3939;
79  margin: 2rem 0;
80  padding: 0;
81}
82
83.post-img {
84  position: relative;
85  .btn-img {
86    position: absolute;
87    left: 45px;
88    bottom: 5px;
89    width: 5rem;
90    color: #fff;
91    background-color: #afafaf;
92    padding: 0.5rem;
93    border-radius: 1rem;
94    text-decoration: none;
95    cursor: pointer;
96    cursor: hand;
97    border: none;
98    outline: none;
99    font-weight: bold;
100  }
101}
102</style>

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

回答2件

自己解決

  created() {
    this.db = firebase.firestore().collection("posts");
    // dbインスタンスを初期化して"posts"という名前のコレクションへの参照を作成
  },
  methods: {
    postItem() {
      this.db.collection("posts").add({
        title: this.title,
        description: this.description,
        image: this.image,
        genre: this.genre
      });
    }
  }

this.db変数にfirebase.firestore().collection("posts")と入れているのにも関わらず
this.db.collection("posts").add({と定義して重複させてしまっておりました。

投稿2021/04/14 01:25

TMTN

総合スコア53

とりあえずコレクションの持つコレクションを取得しようとしているのは間違っていますね。
コレクションはそのメンバにコレクションを持っていません。
CollectionReference | JavaScript SDK | Firebase

javascript
1  created() {
2    this.db = firebase.firestore().collection("posts");
3    // dbインスタンスを初期化して"posts"という名前のコレクションへの参照を作成
4  },
5  methods: {
6    postItem() {
7      this.db.collection("posts").add({
8      (以下略)