带有大表单的 VueJS

Question

我有一个包含 20 多个字段的巨大表单。我觉得我现在写的代码有很多冗余。什么是最好的方法 ？

<script>
new Vue({
    data : {
        user : {
            first_name : "",
            last_name : "",
            username : "",
            and 20+.........
        }
    }
});
</script>

<form>
    <input name="first_name" v-model="first_name">
    <input name="last_name" v-model="last_name">
    <input name="username" v-model="username">
    and 20+......... input fields
</form>

我觉得这样的事情会很好。用户对象将动态创建。这可能吗？

<script>
new Vue({
    data : {
        user :  Object
    }
});
</script>

<form v-model="user">
    <input name="first_name">
    <input name="last_name">
    <input name="username">
    and 20+......... input fields
</form>

先感谢您

Answer 1

怎么样

data: {
  fields: { name: {v:''}, surname: {v:''}, ... }
}

和

<input v-for="(val, prop) in fields" :name="prop" v-model="val.v" />

？

https://jsfiddle.net/gurghet/dhdxqwjv/1/