发布表单空数据
[英] Post Form empty data
本文介绍了发布表单空数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于我的 NuxtJS 应用程序，我有多个组件以一种形式组合在一起.代码如下:
AppButton.vue
<按钮类=按钮":class="btnStyle":disabled="禁用"v-bind="$attrs"v-on="$listeners"><slot/></button></模板><脚本>导出默认{name: 'AppButton',道具: {btnStyle: {类型:字符串，默认: ''},禁用:{类型:字符串}}}
AppFormInput.vue
<div class="form-input"><输入v-bind="$attrs":name="姓名":值=值":类型=类型":placeholder="占位符":max="最大":分钟=分钟":pattern="模式":required="需要":disabled="禁用"@input="$emit('input', $event.target.value)">
</模板><脚本>导出默认{name: 'AppFormInput',道具: {控制类型:{类型:字符串，默认值:'输入'},姓名: {类型:字符串},价值: {类型:字符串，默认: ''},类型: {类型:字符串，默认: ''},占位符:{类型:字符串，默认: ''},最大限度: {类型:字符串},分钟:{类型:字符串},图案: {类型:字符串},必需的: {类型:字符串，},禁用:{类型:字符串}}}
FormGroup.vue
<div class="form-group"><AppLabel :label="label"/><AppFormInput :v-bind="$attrs"/>
</模板><脚本>从~/components/atoms/AppLabel"导入 AppLabel从'~/components/atoms/AppFormInput' 导入 AppFormInput导出默认{成分: {应用标签，应用程序输入},道具: {标签: {类型:字符串，默认值:'表单标签'}}}
Form.vue
<form @submit.prevent="onSave"><FormGroup label="Form Input" v-model="formPosts.forminput"/><FormGroup label="Form Input Disabled" disabled="禁用" v-model="formPosts.forminputdisabled"/><FormGroup label="Form Input With Placeholder" placeholder="设置占位符" v-model="formPosts.forminputplaceholder"/><FormGroup label="Form Input Required" required="required" v-model="formPosts.forminputrequired"/><FormGroup label="Form Email" type="email" v-model="formPosts.forminputemail"/><FormGroup label="Form Date" type="date" v-model="formPosts.forminputdate"/><FormGroup label="Form Number" type="number" value="1" min="1" max="5" v-model="formPosts.forminputnumber"/><FormGroup label="Form Tel" type="tel" pattern="\d{3}-\d{3}-\d{4}" placeholder="XXX-XXXX-XXXX" v-model="formPosts.forminputtel"/><!--添加选择正常和禁用--><FormGroup label="Form Radio" type="radio" value="1" v-model="formPosts.forminputradio"/><FormGroup label="Form Checkbox" type="checkbox" value="2" v-model="formPosts.forminputcheckbox"/><AppButton type="submit" btn-style="btn-brand">保存</AppButton></表单></模板><脚本>从 '~/components/molecules/FormGroup' 导入 FormGroup从'~/components/atoms/AppButton' 导入 AppButton导出默认{成分: {表单组，应用按钮},数据() {返回{表单帖子:{表单输入:'',禁用表单输入:'',表单输入占位符:'',需要表单输入:'',表单输入电子邮件:'',表单输入日期:'',表单输入编号:'',表单输入:'',forminputradio: '',表单输入复选框:'',}}},方法: {onSave() {console.log(this.formPosts);this.$emit('提交', this.formPosts)},}}
至少，index.vue
<div class="容器"><h1>表格</h1><表单@submit="onSubmitted"/>
</模板><脚本>从'~/components/organism/Form'导入表单导出默认{成分: {形式},方法: {提交(数据){控制台日志(数据)；}}}
提交表单后，字段保持为空.例如，必填字段必须有一个值，但它保持为空.我认为某些组件无法通过该字段的值进行访问.有人有提示吗?
感谢您的帮助
解决方案
$attrs(在 v-bind="$attrs" 中)只会绑定属性，不会绑定道具(粗体是我的):
<块引用>vm.$attrs:包含父作用域属性绑定(class 和 style 除外)未被识别(和提取)为道具.当一个组件没有任何声明的 props 时，这基本上包含所有父级范围的绑定(除了 class 和 style)，并且可以向下传递给内部组件通过 v-bind="$attrs" - 在创建高阶组件时很有用.
你需要在FormGroup.vue中自己设置道具.
在 FormGroup.vue 中，声明 value 属性，以便您可以在模板中使用:
在FormGroup.vue中，在模板中添加:value="value" @input="$emit('input', $event)".
<div class="form-group"><AppLabel :label="label"/><AppFormInput :v-bind="$attrs" :value="value" @input="$emit('input', $event)"/>
</模板>
上面的代码将设置 input 事件.Form.vue 中的 v-model 不应该工作.
for me NuxtJS application i've got multiple components thats come together in one form. Here the code:
AppButton.vue
<template>
<button
class="button"
:class="btnStyle"
:disabled="disabled"
v-bind="$attrs"
v-on="$listeners"><slot /></button>
</template>
<script>
export default {
name: 'AppButton',
props: {
btnStyle: {
type: String,
default: ''
},
disabled: {
type: String
}
}
}
</script>
AppFormInput.vue
<template>
<div class="form-input">
<input
v-bind="$attrs"
:name="name"
:value="value"
:type="type"
:placeholder="placeholder"
:max="max"
:min="min"
:pattern="pattern"
:required="required"
:disabled="disabled"
@input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
name: 'AppFormInput',
props: {
controlType: {
type: String,
default: 'input'
},
name: {
type: String
},
value: {
type: String,
default: ''
},
type: {
type: String,
default: ''
},
placeholder: {
type: String,
default: ''
},
max: {
type: String
},
min: {
type: String
},
pattern: {
type: String
},
required: {
type: String,
},
disabled: {
type: String
}
}
}
</script>
FormGroup.vue
<template lang="html">
<div class="form-group">
<AppLabel :label="label"/>
<AppFormInput :v-bind="$attrs"/>
</div>
</template>
<script>
import AppLabel from '~/components/atoms/AppLabel'
import AppFormInput from '~/components/atoms/AppFormInput'
export default {
components: {
AppLabel,
AppFormInput
},
props: {
label: {
type: String,
default: 'Form Label'
}
}
}
</script>
Form.vue
<template lang="html">
<form @submit.prevent="onSave">
<FormGroup label="Form Input" v-model="formPosts.forminput"/>
<FormGroup label="Form Input Disabled" disabled="disabled" v-model="formPosts.forminputdisabled"/>
<FormGroup label="Form Input With Placeholder" placeholder="Set placeholder" v-model="formPosts.forminputplaceholder"/>
<FormGroup label="Form Input Required" required="required" v-model="formPosts.forminputrequired"/>
<FormGroup label="Form Email" type="email" v-model="formPosts.forminputemail"/>
<FormGroup label="Form Date" type="date" v-model="formPosts.forminputdate"/>
<FormGroup label="Form Number" type="number" value="1" min="1" max="5" v-model="formPosts.forminputnumber"/>
<FormGroup label="Form Tel" type="tel" pattern="\d{3}-\d{3}-\d{4}" placeholder="XXX-XXXX-XXXX" v-model="formPosts.forminputtel"/>
<!--Add Select normal and disabled-->
<FormGroup label="Form Radio" type="radio" value="1" v-model="formPosts.forminputradio"/>
<FormGroup label="Form Checkbox" type="checkbox" value="2" v-model="formPosts.forminputcheckbox"/>
<AppButton type="submit" btn-style="btn-brand">Save</AppButton>
</form>
</template>
<script>
import FormGroup from '~/components/molecules/FormGroup'
import AppButton from '~/components/atoms/AppButton'
export default {
components: {
FormGroup,
AppButton
},
data() {
return{
formPosts: {
forminput: '',
forminputdisabled: '',
forminputplaceholder: '',
forminputrequired: '',
forminputemail: '',
forminputdate: '',
forminputnumber: '',
forminputtel: '',
forminputradio: '',
forminputcheckbox: '',
}
}
},
methods: {
onSave() {
console.log(this.formPosts);
this.$emit('submit', this.formPosts)
},
}
}
</script>
At least, the index.vue
<template lang="html">
<div class="container">
<h1>Forms</h1>
<Form @submit="onSubmitted"/>
</div>
</template>
<script>
import Form from '~/components/organism/Form'
export default {
components: {
Form
},
methods: {
onSubmitted(data){
console.log(data);
}
}
}
</script>
when the form is submitted the fields stays empty. The required field must have a value for example but it stays empty. I think that the some components not have access through the value of the field. Does anyone have tips?
Thanx for any help
解决方案
$attrs (in v-bind="$attrs") will only bind attributes, not props (bold is mine):
vm.$attrs: Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props. When a component doesn't have any declared props, this essentially contains all parent-scope bindings (except for class and style), and can be passed down to an inner component via v-bind="$attrs" - useful when creating higher-order components.
You need to set the props yourself in FormGroup.vue.
In FormGroup.vue, declare the value prop so you can use in the template:
<script>
import AppLabel from '~/components/atoms/AppLabel'
import AppFormInput from '~/components/atoms/AppFormInput'
export default {
components: {
AppLabel,
AppFormInput
},
props: {
label: {
type: String,
default: 'Form Label'
},
value: { // added this
type: String // added this
} // added this
}
}
</script>
In FormGroup.vue, Add :value="value" @input="$emit('input', $event)" to the template.
<template lang="html">
<div class="form-group">
<AppLabel :label="label"/>
<AppFormInput :v-bind="$attrs" :value="value" @input="$emit('input', $event)" />
</div>
</template>
The code above will set <AppFormInput>'s value and will propagate (up) it's input event. Not the v-models in Form.vue should work.
这篇关于发布表单空数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
