[英]Is there a way to shorten defining v-model data, Vue.js and 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很陌生
您可以更改数据模型添加新层。 例如:
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
的名称替换名称,例如在v-models
中:
first_name -> currentStudne.first_name
您还可以阅读有关Vue.$set
您可以使用对象studentData
,它适用于v-model
。 首先,你像这样传递道具:
<student-edit-component :student="student">
(无需使用${{}}
)。
然后在组件`StudentEditComponent'中,你可以使用:
props: {
student: {
type: Object,
required: true,
default : () => {},
}
}
您应该使用 type、required 和 default 属性,这是一个很好的做法。 然后
data () {
return {
studentForm: {},
};
},
created() {
this.studentForm = this.student;
}
在模板中,之后您可以使用v-model="studentForm.first_name"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.