updateDoc 不接受变量作为字段名

Question

我使用来自 fireStore 的函数 updateDoc。我也使用 VueJs 作为框架。我尝试使用用户输入 (member_name) 作为字段名称来创建嵌套文档。但是，我一直收到“意外关键字'this'。（42:20）”的错误。问题出在这部分。

this.member_name: {
      name: this.member_name,
      task: 0,
      task_status: 0,
}

你能帮我解决吗？以下是完整代码

<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>

Answer 1

您可以使用[] 表示法将变量的值用作属性名称：

await updateDoc(projectDoc, {
    member_list: {
        [this.member_name]: { // ?
            name: this.member_name,
            task: 0,
            task_status: 0,
        }  
    },
});

除此之外：如果您想将成员添加到现有的member_list 数组中，您需要使用array-union 运算符，如updating elements in an array field 上的文档中所示。

Answer 2

您正在尝试为文档设置错误的值。在这段代码中：

await updateDoc(projectDoc, {
    member_list: {
        this.member_name: {
            name: this.member_name,
            task: 0,
            task_status: 0,
        }  
    },
});

第三行应该声明对象的结构，但你引用的是一个值，这是错误的。

正确的方法是这样的：

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