前言
作为一个半路半出家的小前端，今天碰到这样一个需求: 动态增减表单项目
动态增减的还不是一个操作项，我试了几种方式总是差一点点，不是校验不上就是不校验，这种一般都是绑定问题，于是我去官方找了下文档，文档是有了但是有些看不懂所以造成了还是有上边的问题，最终经过各种尝试完成了这个小小的小需求，其实尝试出来后发现也就是很简单的小事情，只不过自己不懂而已。
接下来说一下在这个过程中需要注意的小点吧。
首先上一下官方代码
<a-form
ref="formRef"
name="dynamic_form_nest_item"
:model="dynamicValidateForm"
@finish="onFinish"
>
<a-space
v-for="(user, index) in dynamicValidateForm.users"
:key="user.id"
style="display: flex; margin-bottom: 8px"
align="baseline"
>
<a-form-item
:name="['users', index, 'first']"
:rules="{
required: true,
message: 'Missing first name',
}"
>
<a-input v-model:value="user.first" placeholder="First Name" />
</a-form-item>
<a-form-item
:name="['users', index, 'last']"
:rules="{
required: true,
message: 'Missing last name',
}"
>
<a-input v-model:value="user.last" placeholder="Last Name" />
</a-form-item>
<MinusCircleOutlined @click="removeUser(user)" />
</a-space>
<a-form-item>
<a-button type="dashed" block @click="addUser">
<PlusOutlined />
Add user
</a-button>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
动态的表单项在a-space标签内我想这个大家都能看出来,主要就是a-form-item如何绑定的问题
主要绑定代码是 :name="['users', index, 'first']" 以为它是随便写的就错了，主要绑定关系就在这! 其中 users必须和你Form modéll里数组的命名是一样的,其次后边first也是和数组模型的属性名称相同
