[英]How to update v-model data in laravel blade file in edit form
[英]Have a form to edit user account, make default values current values but still use v-model?
我正在尝试制作一个表格来编辑您在Vue / Laravel中的用户帐户。
理想情况下,我想将用户的值和名称预先填充为当前值。 我可以轻松地使用
<input type="text" class="form-control" name="user" autocomplete="false" :value="$parent.user.name">
问题是我也想这样使用v-model="form.name"
:
<template>
<form class="row" @submit.prevent="onSubmit">
<div class="form-group col-md-6 col-lg-3">
<label>Name</label>
<input type="text" class="form-control" name="user" autocomplete="false" :value="$parent.user.name" v-model="form.name">
</div>
<div class="form-group col-md-6 col-lg-3">
<label>Email address</label>
<input type="email" class="form-control" placeholder="Enter email" autocomplete="false" name="email" :value="$parent.user.email" v-model="form.email">
</div>
<div class="form-group col-lg-3">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password" autocomplete="new-password" name="password" v-model="form.password">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</template>
<script>
export default {
data() {
return {
form: new Form({
name: '',
email: '',
password: '',
})
}
},
methods: {
onSubmit() {
// ajax stuff here
}
}
}
</script>
但这会引发错误:value =“ $ parent.user.name”与同一元素上的v-model冲突,因为后者已经在内部扩展为绑定值 ,我认为我可以理解,因为它不能是两个模型。
是否有更好的方法来获取已充满值的表单,但将其绑定到某种模型,以便我可以轻松地通过axios提交表单? (我正在尝试使用Vue Laracast教程中的Form类,但不确定是否有更好的方法来完成所有这些工作。) https://github.com/laracasts/Vue-Forms/blob/master/public/ js / app.js
看来我可以在模板部分访问$parent.user.name
,但不能在文件的脚本部分使用this.$parent.user.name
。
如果有任何不同,这些全部在route Vue文件中。 这是我的主要Vue应用。
import Nav from './components/Nav';
import AuthUser from './models/AuthUser';
new Vue({
el: '#app',
components: {
Nav
},
data() {
return {
user: []
}
},
created() {
AuthUser.load(user => this.user = user);
},
router
});
v-model
已经绑定了值,因此您不能将value
绑定到一件事,而将v-model
绑定到其他东西。
要从所需的值开始,可以执行以下操作:
data() {
return {
form: new Form({
name: this.$parent.user.name,
email: this.$parent.user.email,
password: this.$parent.user.password, //please don't, it's just an example :)
})
}
},
并从元素中删除:value
:
<input type="text" class="form-control" name="user" autocomplete="false" v-model="form.name">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.