有一个表单来编辑用户帐户，使默认值成为当前值，但仍使用 v-model?

Question

我正在尝试制作一个表单来编辑您在 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。

如果这有任何区别，这一切都在路由 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
});

Answer 1

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