0

When I try to update Firebase document, it show below error message in the console.

Unhandled promise rejection FirebaseError: "Function DocumentReference.update() called with invalid data. Unsupported field value: undefined (found in field name)"

I tried to debug using console.log() and I found that variable editedItem is not recognize inside the update method.

How to solve this issue

data: () => ({
    editedIndex: -1,
    editedItem: {
      id: 1,
      name: "SSFS",
      description: "XXXX"
    },
    newItem: {
      id: null,
      name: null,
      description: null
    }
  }),


    save() {
      if (this.editedIndex > -1) {
        // Update Category
        // Object.assign(this.desserts[this.editedIndex], this.editedItem);
        db.collection('categories').where('id', '==', this.editedItem.id).get().then( (querySnapshot) => {
          querySnapshot.forEach( (doc) => {
            doc.ref.update({
              name : this.editedItem.name,
              description : this.editedItem.description
            }).then(() => {
              this.$router.push('/categories') 
            })
          })
        })
      }
    }

Error :

Unhandled promise rejection FirebaseError: "Function DocumentReference.update() called with invalid data. Unsupported field value: undefined (found in field name)

caldera.sac
  • 4,918
  • 7
  • 37
  • 69
SSFS
  • 3
  • 1
  • Are you sure you have some values in the `editedItem` object? What if you `console.log()` their value? Also, you may have a look at https://stackoverflow.com/questions/48980865/vue-js-difference-of-data-return-vs-data – Renaud Tarnec May 21 '19 at 09:09

1 Answers1

0

You are trying to access the data object in a wrong way. You should change your data function into an object.

so instead of:

data: () => ({
editedIndex: -1,
editedItem: {
  id: 1,
  name: "SSFS",
  description: "XXXX"
},
newItem: {
  id: null,
  name: null,
  description: null
}

}),

Just remove the function from this implementation and just present this data as a regular object.

Do this:

data: {
editedIndex: -1,
editedItem: {
  id: 1,
  name: "SSFS",
  description: "XXXX"
},
newItem: {
  id: null,
  name: null,
  description: null
}

},

This will let you access the data object with the 'this' keyword and get you the right value.

Now all left for you to do is change these lines:

name : this.editedItem.name,
description : this.editedItem.description

Into this:

name: this.data.editedItem.name,
description: this.data.editedItem.description
ShaiShai
  • 134
  • 7