将数据放入 prop 使其看起来整洁 Vue.js

Posted 2023-02-16

【中文标题】将数据放入 prop 使其看起来整洁 Vue.js

【英文标题】：Putting data inside prop to make it look tidy Vue.js

【发布时间】：2021-01-02 14:10:21

【问题描述】：

我有一个创建页面，我使用 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;

【参考方案1】：

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

data() 
  return 
    studentData: 
      first_name: '',
      last_name: '',
      student_number: '',
      phone_number: '',
      email: '',
      birth_date: '',
      school_name: '',
    ,
  ;

然后你就可以了

axios.post('/api/students', this.studentData);

请注意，您还需要更新您的v-models，例如v-model="studentData.first_name"，而不是v-model="first_name"。

【讨论】：

这与问题中提出的方法相同：***.com/questions/63905717/… 我强烈推荐此解决方案。

【参考方案2】：

您可以从this.$props 或this.$data 访问组件道具或数据，

所以你可以简单地做

axios.post(`/api/students`, this.$data);

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

【讨论】：

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