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

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

1 个答案: