表单是几乎任何Web应用程序不可或缺的一部分,它们实际上只是从用户那里获取信息并将其转化为一种机器可读的数据模型,但并非每个人都知道HTML表单元素是如何工作的,以及它如何简化他们的生活,特别是当涉及到处理用户提交和事件绑定在像Vue.js这样的库中时,现在是时候将记录设置为直。
错误的方式
更常见的是,我看到人们做这样的事情:(将他们的数据提交处理器绑定到家长元素和按钮点击事件)。
1<template>
2 <div @keydown.enter="handleSubmit">
3 <label>
4 Email:
5 <input type="email" v-model="user.email"/>
6 </label>
7 <label>
8 Name:
9 <input type="text" v-model="user.name"/>
10 </label>
11 <label>
12 Password:
13 <input type="password" v-model="user.password"/>
14 </label>
15 <button @click="handleSubmit">Submit</button>
16 </div>
17</template>
18
19<script>
20export default {
21 data() {
22 return {
23 user: {
24 email: '',
25 name: '',
26 password: ''
27 }
28 }
29 },
30
31 methods: {
32 handleSubmit() {
33 // Send data to the server or update your stores and such.
34 }
35 }
36}
37</script>
现在,有几十个原因认为这是一个糟糕的想法. 首先,它使屏幕读者和喜欢的人很难知道他们在一个形式中。 此外,你必须将事件处理器连接到按钮和包含元素,而且它仍然不真正处理每个用例。
好方法
那么你应该做什么呢? 好吧,实际上它非常简单! 使用<form>元素!
1<template>
2 <!-- @submit handles any form of submission. -->
3 <!-- .prevent keeps the event from bubbling around and doing anything else. -->
4 <form @submit.prevent="handleSubmit">
5 <label>
6 Email:
7 <input type="email" v-model="user.email"/>
8 </label>
9 <label>
10 Name:
11 <input type="text" v-model="user.name"/>
12 </label>
13 <label>
14 Password:
15 <input type="password" v-model="user.password"/>
16 </label>
17 <button type="submit">Submit</button>
18 </form>
19</template>
20
21<script>
22export default {
23 data() {
24 return {
25 user: {
26 email: '',
27 name: '',
28 password: ''
29 }
30 }
31 },
32
33 methods: {
34 handleSubmit() {
35 // Send data to the server or update your stores and such.
36 }
37 }
38}
39</script>
Boom. 按下按钮是处理的. 按入是处理的. 任何其他形式提交的方法,过去,现在或未来,是处理的。
似乎很少有前端开发人员忘记或忽略了良好的ol