Edit and Save data to firebase with setDoc()-CodePudding

Soo I want to save an edited item from an array to firebase but when I try to to with setDoc() I get this error below

Uncaught FirebaseError: Expected type 'Ta2', but it was: a custom Aa2 object

This is my code:

<div v-for="(post, id) in posts" :key="id">
  <h3>By: {{ post.name }}</h3>
  <p>{{ post.post }}</p>
  <p>{{ post.date }}</p>
    
  <button @click="deletePost(id)">delete</button>
      
  <div v-if="post === postItemToEdit">
    <input type="text" v-model="post.post" >
    <button @click="savePost">Save</button>
    <button @click="cancleEditMode">Cancle</button>
  </div>
      
  <button v-else @click="editPost(post)">Edit</button> 
</div>

<script setup>
  const blogCollectionRef = collection(db, "blogs")

  const name = ref("")
  const post = ref("")
    
  const addPost = () => {
    addDoc(blogCollectionRef, {
      name: name.value,
      post: post.value,
      date: Date.now(),
    });

    name.value = ""
    post.value = ""
  }

  const postItemToEdit = ref()

  const editPost = (post) => {
    postItemToEdit.value = post
  }
  
  const savePost = () => {
    postItemToEdit.value = (false)

    setDoc(blogCollectionRef, {
      post: "Los Angeles"
    })
  }
</script>

I think it has to do with the fact that I'm using collection instead of doc but the array I'm fetching is stored in a collection I named "blogs".

CodePudding user response：

You should use updateDoc() to update an existing document and not setDoc(). You'll need the document ID so you can just pass it to the savePost() function:

<div v-for="(post, id) in posts" :key="id">
  <!-- ... -->
    <button @click="savePost(post.id)">Save</button>
  <!-- ... -->
</div>

const savePost = async (postId) => {
  postItemToEdit.value = (false)

  await updateDoc(doc(blogCollectionRef, postId), {
    post: "Los Angeles"
  })
}