Using With Large Forms
See original GitHub issueI have a huge form with 20+ fields. i feel so much redundancy on the code i write now. What is the best way ?
<script>
new Vue({
data : {
user : {
first_name : "",
last_name : "",
username : "",
and 20+.........
}
}
});
</script>
<form>
<input name="first_name" v-model="user.first_name">
<input name="last_name" v-model=.user.last_name">
<input name="username" v-model=.user.username">
and 20+......... input fields
</form>
i feel something like this would be nice. the user object will be created dynamically… is this possible ?
<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>
Is this possible ? i have to define each repeatedly in data object and in the form. it would be nice if we can achieve it something similar or simpler than that…
Issue Analytics
- State:
- Created 7 years ago
- Comments:13 (7 by maintainers)
Top Results From Across the Web
Pattern 5: Improve usability of long forms - UI & Visual Design ...
While clever designers and writers can simplify forms somewhat by cutting unimportant fields, in many cases long forms are essential and unavoidable.
Read more >Good design for Web Apps with Large Forms [closed]
Good design for Web Apps with Large Forms [closed] · Having a large number of fields in a single page (as mentioned above)...
Read more >58 Form Design & UX Best Practices - Venture Harbour
Uber's forms use large full-width call to actions that are highly contrasted against the form backgrounds. By making call to actions the ...
Read more >Big, Boring Forms in React - YouTube
If you're targeting modern browsers (anything newer than IE11, really), there are browser APIs to deal with form directly to get the filled ......
Read more >7 Best UX Practices for Designing Long Online Forms - Prototypr
For those who are designing long forms that have more than 7 questions, this article is for you. Here is a guide to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This is a non issue because you can already solve it easily enough with v-for. And as Evan said
This is a userland problem since it's achievable via components.
Great !! but will be available in future ? or no way to this ? it will be clean there is alot redundancy of same variable name. can this be a feature request ?