是否具有編輯用戶帳戶，將默認值設為當前值但仍使用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 。

如果有任何不同，這些全部在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
});

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