[firebase]TooListの実装

7397 ワード
テキストリンク
本来はログインで終わるサイドアイテムです.
もっと機能を使えばもっといいと思ったので実現しました.
第一部こちらを参考にしてください。でいいです.
まずcloud firstoreにデータを送信する準備をします.
次にjsに次の内容を追加します.
import { collection, addDoc } from "firebase/firestore";
import { getFirestore } from "firebase/firestore";
const db = getFirestore();
イベントをクリックして、イベントをボタンに接続する必要があります.
<template>
  <div>
    <v-text-field v-model="myTodo" label="할일 입력" required></v-text-field>
    <v-btn color="success" @click="addTodo" class="mt-3"> Add </v-btn>
  </div>
</template>
このように追加しましょう!
詳細は正式文書を参照してください.
export default {
  methods: {
    async addTodo() {
      try {
        const docRef = await addDoc(collection(db, "todo"), {
          title: this.myTodo,
          created_at: Date.now(),
        });
        console.log("Document written with ID: ", docRef);
      } catch (e) {
        console.error("Error adding document: ", e);
      }
    },
  },
};
このようにすると、誰もが突然間違いを犯すことになります.

何か書き間違えたかもしれませんが、検索結果はルールを少し修正すればいいということです.

デフォルトはfalse、trueに変換して実行

正常にデータが追加されていることがわかります.
問題は
私が欲しいのは配列にオブジェクトを追加することです.
これはドキュメントの生成を続けているので、これは間違っていることに気づきました...!
もしあなたが私の欲しいことをしたいなら.arrayUnionとarrayRemoveを使用する必要があります.
詳細は正式な書類によく表示されています.

とにかくこうすればこのような機能が整ったtodo listが完成します
次回はログイントークンをstoreにインポートしvuetifyを削除してuiを変更します!
ポアソン酒
1.オブジェクトと依存関係-IoC