I use function updateDoc from fireStore. I also use VueJs as a framework. I try to create a nested document with the user input (member_name) as a field name. However, I keep receiving the error that "Unexpected keyword 'this'. (42:20)". The problem is from this section.
this.member_name: {
name: this.member_name,
task: 0,
task_status: 0,
}
Can you help me to solve it? Below is the full code
<template>
<div class="container shadow m-3 col-12">
<div class="d-flex justify-content-center m-2">
<h1>Add Member</h1>
</div>
<label for="member_name">Member name</label>
<input class="form-control m-1" type="text" id="member_name" v-model="member_name"/>
<label for="member_email">Member Email</label>
<input class="form-control m-1" type="email" id="member_email" v-model="member_email"/>
<div class="d-flex justify-content-center">
<button @click.prevent="submit" class="btn btn-primary col-6 m-2">Submit</button>
</div>
</div>
</template>
<script>
import firebaseApp from '@/firebase.js'
import { getFirestore } from "firebase/firestore"
import { doc, updateDoc} from "firebase/firestore"
const db = getFirestore(firebaseApp);
import { getAuth, onAuthStateChanged } from "firebase/auth";
export default {
name: "AddMember",
components: {
},
data(){
return{
email:"",
project_name:"",
member_name:"",
member_email:"",
}
},
mounted(){
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
this.email = user.email
console.log(this.email)
} else {
console.log("Sorry")
}
});
},
methods: {
async submit() {
alert("Add new member successfully!")
this.project_name = this.$route.query.project_name
const projectDoc = doc(db, "projects", this.project_name);
await updateDoc(projectDoc, {
member_list: {
this.member_name: {
name: this.member_name,
task: 0,
task_status: 0,
}
},
});
}
},
}
</script>
<style>
</style>
You can use [] notation to use the value of the variable as the property name:
await updateDoc(projectDoc, {
member_list: {
[this.member_name]: { // 👈
name: this.member_name,
task: 0,
task_status: 0,
}
},
});
Aside from that: if you want to add the member to the existing member_list array, you'll want to use the array-union operator as shown in the documentation on updating elements in an array field.
You are trying to set a wrong value for the document. In this code:
await updateDoc(projectDoc, {
member_list: {
this.member_name: {
name: this.member_name,
task: 0,
task_status: 0,
}
},
});
the third line should declare the structure of the object, but you are referencing to a value, and that's wrong.
The correct way would be something similar to this:
await updateDoc(projectDoc, {
member_list: {
member_name: { // <- or use whatever you want to define this object
name: this.member_name,
task: 0,
task_status: 0,
}
},
});