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

Posted 2023-02-22

【中文标题】有一个表单来编辑用户帐户，使默认值成为当前值但仍然使用 v-model？

【英文标题】：Have a form to edit user account, make default values current values but still use v-model?

【发布时间】：2018-11-21 22:24:44

【问题描述】：

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

【问题讨论】：

使用$parent 访问数据是一种不好的做法。改用道具。

【参考方案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">

【讨论】：

奇怪的是，当我尝试这个时，我只是得到空白的输入字段。 Vue DevTools 显示表单名称未定义。但是我可以在文件的模板部分使用 $parent.user.name，但是当我尝试在脚本部分使用它时 this.$parent.user.name 是未定义的。

$parent 来自哪里？那是什么版本的 Vue？

根据 package.json 看起来我使用的是 2.5.7。我只是使用某人关于如何访问组件/路由中的父数据的建议中的 $parent 。在主 Vue 应用程序上，我有从 ajax 调用返回当前用户的数据。

天哪，请不要。不要尝试从组件访问父数据。请改用props。

@Octoxan 你可以pass props to routes.