时间戳

首页 > 解决方案 > 有没有办法缩短定义 v-model 数据、Vue.js 和 Laravel

javascript - 有没有办法缩短定义 v-model 数据、Vue.js 和 Laravel

问题描述

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

我的填充 v-model 的代码

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

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

这会用它的数据填充表单输入上的值。

有没有办法使用道具或数组来缩短这段代码？

请帮助我，我对Vue很陌生

标签： javascriptphplaravelvue.jsvuejs2

解决方案

您可以更改数据模型添加新层。例如：

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

然后在created你可以使用简单

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

并在所有组件中用名称替换名称，currentStudne例如 in v-models：

first_name -> currentStudne.first_name

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

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

推荐阅读