Struggling with a realtimeDB issue while using NuxtJS to manage state and send it to the DB. Saving data works fine, but editing results in a 400 BAD Request error. This error also occurs when trying to manually update information within Firebase realtime DB.
ERROR:
vendor.js:387 PUT https://xxxx.firebaseio.com/posts.json-MI-Jym0mdX5jNNP89UH.json?auth=BIGKEY 400 (Bad Request)
My component
<template>
<div class="admin-post-page">
<section class="update-form">
<AdminPostForm :post="loadedPost" @submit="onSubmitted" />
</section>
</div>
</template>
<script>
import AdminPostForm from "@/components/Admin/AdminPostForm";
export default {
layout: "admin",
middleware: ['check-auth', 'auth'],
components: {
AdminPostForm
},
asyncData(context) {
return context.app.$axios
.$get(
process.env.baseUrl + "/posts/" +
context.params.postId +
".json"
)
.then(data => {
return {
loadedPost: { ...data, id: context.params.postId }
};
})
.catch(e => context.error());
},
methods: {
onSubmitted(editedPost) {
this.$store.dispatch("editPost", editedPost).then(() => {
this.$router.push("/admin");
});
}
}
};
</script>
The store method is:
editPost(vuexContext, editedPost) {
return this.$axios
.$put(
"https://XXXX.com/posts.json" +
editedPost.id +
".json?auth=" +
vuexContext.state.token,
editedPost
)
.then(res => {
vuexContext.commit("editPost", editedPost);
})
.catch(e => console.log(e));
}
And my rules are:
{
"rules": {
".read": true,
".write": true
}
}
If you have any insights on why I am facing these restrictions, your help would be greatly appreciated!
Thank you!