【Vue×firebase】データの追加

Question

前提

• clickイベントを使用してfirebaseのDBに入力したデータを追加したい
• 現状はfirebaseのデータを反映させることはできている
• addThreadメソッドでthreadListに追加することはできているけどfirebaseのDBには追加されてない(ブラウザに反映されてもブラウザ上で追加したデータはリロードすると消えてしまう)

実現したいこと

リストaddThreadメソッドでthreadListに追加し、firebaseのDBにも反映させたい
※キャプチャのデータはfirebaseで直接追加したもの、ブラウザからの追加からは実現できていない

該当のソースコード

<script setup lang="ts">
import { ref } from 'vue'
import { db } from '../firebaseConfig'
import { collection, getDocs } from 'firebase/firestore'

const title = ref('')
const text = ref('')
const threadList = ref()

const getThreadList = async () => {
  const query = await getDocs(collection(db, 'thread'));
  threadList.value = query.docs.map((doc) => ({
    ...doc.data(),
    id: doc.id,
  }));
};

getThreadList();

const addThread = () => {
  threadList.value.push({ title: title.value, text: text.value });
  title.value = '';
  text.value = '';
};
</script>

<template>
  <div id="app">
    <h2>スレッド一覧</h2>

    <ul>
      <li v-for="(thread, index) in threadList" :key="index">
        <router-link :to="`/post/${index}`">
          <h3>{{ thread.title }}</h3>
        </router-link>
        <p>{{ thread.text }}</p>
      </li>
    </ul>    
  
    <input type="text" @keypress.enter="addThread" v-model="title"><br><br>
    <textarea cols="60" rows="10" @keypress.enter="addThread" v-model="text" /><br>
    <button @click="addThread">追加</button>
  </div>
</template>

試したこと

threadListの配列データに追加する処理は正しいはずだけど、それをDBに反映させる方法がわからずfirebaseのメソッドを使用する必要があると推測addやsetなどの情報が見つけることができたもののそれを使用した実装方法について明確なやり方について理解することができませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

addDocメソッドを使用することで解決ができた

const addThread = async () => {
  threadList.value.push({ title: title.value, text: text.value });
  await addDoc(collection(db, 'thread'), {
    title: title.value,
    text: text.value,
  });
  title.value = '';
  text.value = '';
};