Javascript 将数据放入道具中，使其看起来整洁Vue.js

我有一个创建页面，我使用Axios发出POST请求，效果非常好。但我认为我的代码根本不健康

这就是我定义道具的方式：

data () {
            return {

                first_name: '',
                last_name: '',
                student_number: '',
                phone_number: '',
                email: '',
                birth_date: '',
                school_name: '',
            };
        },

这些东西是

v-model

的对象。我使用它们向我的API发出POST请求。但是我可以把它们放在阵列或道具中，而不是一个接一个地写它们吗

当我向API发出请求时，我会再次逐个定义我的

v-model

像这样

axios.post(`/api/students`, {

                first_name:this.first_name,
                last_name:this.last_name,
                student_number:this.student_number,
                phone_number:this.phone_number,
                email:this.email,
                birth_date:this.birth_date,
                school_name:this.school_name,    

我可以用一行或两行发送吗

---

比如：

postedData:this.studentData

您可以从

this.$props

或

this.$data

访问组件道具或数据

所以你可以简单的做

axios.post（`/api/students`，this.$data）；

---

但这意味着您正在请求中发送整个组件数据，为了避免这种情况，请尝试推荐的@BogdanL answer。

您可以从

this.$props

或

this.$data

访问组件道具或数据

所以你可以简单的做

axios.post（`/api/students`，this.$data）；

---

但这意味着您要在请求中发送整个组件数据，为了避免这种情况，请尝试推荐的@BogdanL answer。

虽然前面的答案对于这个特定用例是正确的，但如果您要添加不想发送的属性，它将不再起作用。更好的方法是将所有这些属性放在一个对象中，我们将其命名为

studentData

，如下所示：

data（）{
返回{
学生资料：{
名字：''，
姓氏：“”，
学号：''，
电话号码：''，
电子邮件：“”，
出生日期：''，
学校名称：''，
},
};
}

然后你就可以做了

axios.post（'/api/students'，this.studentData）；

---

请注意，您还需要更新您的

v-model

s，如

v-model=“studentData.first\u name”

而不是

v-model=“first\u name”

，虽然前面的答案对于这个特定用例是正确的，但如果您要添加不想发送的属性，它将不再有效。更好的方法是将所有这些属性放在一个对象中，我们将其命名为

studentData

，如下所示：

data（）{
返回{
学生资料：{
名字：''，
姓氏：“”，
学号：''，
电话号码：''，
电子邮件：“”，
出生日期：''，
学校名称：''，
},
};
}

然后你就可以做了

axios.post（'/api/students'，this.studentData）；

---

请注意，您还需要更新您的

v-model

s，如

v-model=“studentData.first\u name”

，而不是

v-model=“first\u name”

这与问题中提出的方法相同：我强烈推荐此解决方案。这与问题中提出的方法相同：我强烈推荐此解决方案。在这种特殊情况下，此解决方案有效，但它是一种非常危险的项目模式。让我们想象一下，当有人扩展数据时会发生什么，例如添加加载状态或其他与学生信息无关的数据。在这种情况下，代码很短，但设计糟糕。在这种特殊情况下，此解决方案可行，但它是一种非常危险的项目模式。让我们想象一下，当有人扩展数据时会发生什么，例如添加加载状态或其他与学生信息无关的数据。在这种情况下，代码很短，但设计糟糕。