updateDoc doesn't accept variable as field name-CodePudding

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>

CodePudding user response：

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,
        }  
    },
});

CodePudding user response：

You can use [] notation to use the value of the variable as the property name:

await updateDoc(projectDoc, {
    member_list: {
        [this.member_name]: { //