表单提交时,表单值为空
问题复现步骤:
代码:
<template>
<form @submit="formSubmit" @reset="formReset">
<mp-field placeholder="请输入您的姓名" name='name' label="姓名" />
<mp-field placeholder="请输入您的手机号" type="number" name='mobile' label="手机号" />
<button formType="submit" size='large'>提交</button>
</form>
</template>
<script>
import MpField from 'mp-weui/packages/field';
export default {
components: {
MpField
},
methods: {
formSubmit (e) {
let { value } = e.target;
console.log('表单内容',value);
console.log('form发生了submit事件,携带数据为:', e);
},
formReset () {
console.log('form发生了reset事件');
}
}
};
</script>
期望的表现:
输入表单后,点击提交,
form的 @submit事件中,可以打印出表单输入的值。
观察到的表现:
输入表单后,点击提交,
form的 @submit事件中,一直打印出空字典。
若将mp-field 改为 input, 则可以得到预期的表现。
原因是因为表单提交时,会根据 input 的name属性获取表单各个字段的值,
而 mp-filed 没有将name属性传递给 input,导致无法获取到表单的值。
表单提交时,表单值为空
问题复现步骤:
代码:
期望的表现:
输入表单后,点击提交,
form的
@submit事件中,可以打印出表单输入的值。观察到的表现:
输入表单后,点击提交,
form的
@submit事件中,一直打印出空字典。若将mp-field 改为 input, 则可以得到预期的表现。
原因是因为表单提交时,会根据
input的name属性获取表单各个字段的值,而 mp-filed 没有将name属性传递给 input,导致无法获取到表单的值。