有没有一种方法可以缩短定义V模型数据，Vue.js和Laravel的速度 [英] Is there a way to shorten defining v-model data, Vue.js and Laravel

问题描述

在我的CRUD项目的编辑页面上，我有一个代码，用正在编辑记录的值填充表单.
我使用 v-model 定义HTML输入，但是代码似乎太长.
我从道具中获取数据，然后填充 v-model .

On my edit page of CRUD project, I have a code that fills the form with values of which record is being edited.
I use v-model to define HTML inputs, but the code seems too long.
I get the data from the prop, and fill the v-model.

我的填充v模型的代码

created() {
            this.studentData = this.student;
            this.first_name = this.student.first_name;
            this.last_name = this.student.last_name;
            this.student_number = this.student.last_name;
            this.phone_number = this.student.phone_number;
            this.email = this.student.email;
            this.birth_date = moment(this.student.birth_date).format('YYYY-MM-DD');
            this.school_name = this.student.school_name;
        }

我使用prop获取数据的方式: props:['student'] 并在刀片服务器< student-edit-component:student ='; {{$ student}}">

在脚本中定义v模型

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

这将用数据填充表单输入中的值.

That fills the value on the form inputs with it's data.

是否可以使用props或array缩短此代码?

Is there a way to shorten this code using props or arrays?

请帮助我，我对Vue很陌生

Please help me, I'm so new to Vue

推荐答案

您可以更改数据模型以添加新图层.例如:

You can change your model of data adding a new layer. For example:

  data() {
    return {
      currentStudent: {
        first_name: '',
        last_name: '',
        student_number: '',
        phone_number: '',
        email: '',
        birth_date: '',
        school_name: '',
      }
    }
  },

然后在创建的中，您可以使用简单的

Then in created you can use simple

  created() {
    this.currentStudent = this.student;
    this.currentStudent.birth_date = moment(this.student.birth_date).format('YYYY-MM-DD');
  },

在所有组件中，将名称替换为使用 currentStudne 的名称，例如在 v-models 中:

And in all component replace names by names with currentStudne eg in v-models:

first_name -> currentStudne.first_name

您还可以阅读有关 Vue.$ set

https://vuejs.org/v2/guide/reactivity.html

这篇关于有没有一种方法可以缩短定义V模型数据，Vue.js和Laravel的速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！