form表单内子元素组件按钮button事件冲突 - Vue

Vant 组件在调用 form 的时候遇到了子组件按钮 button 嵌套导致表单提交的按钮事件与表单内子元素按钮组件事件冲突的情况;
form表单的button按钮事件与子组件的按钮方法事件并不是相同方法,但是表单中子组件button的点击事件触发后会联代form提交表单的事件一并执行,一来二去的尝试发现了一些奥妙;

解决办法

仔细观察会发现表单中的 button 按钮会有一个 native-type="submit" 的属性;
表单中的子元素 button 组件虽然没有配置该属性,但默认也会享有该属性的特性;
故若想让表单内的子元素 button 按钮组件和 form 提交表单的事件不冲突,则需要像配置提交表单按钮的方式一样配置子元素按钮的 native-type, 但对应的属性 value 值不是 submit 而是 button 即可,具体如下:

1.提交表单的 button 按钮属性

<van-button block 
            type="info" 
            style="background-color: #4C87FE;"
            native-type="submit" 
>
    保存
</van-button>

2.表单 form 内的子元素 button 按钮属性

<van-button type="primary"
            class="popoverBtnStyle"
            size="small"
            name="assessmentDepartmentName"
            v-model="assessmentDepartmentName"
            v-text="assessmentDepartmentName"
            native-type="button"
>
    {{assessmentDepartmentName}}
</van-button>

如下是样例仅供参考:

<van-form @submit="onClickSubmit" class="contentViewStyle">
            <div class="editViewStyle">
                <van-field
                        v-model="assessmentName"
                        name="assessmentName"
                        label="考试名称"
                        placeholder="请输入考试名称"
                        style="font-size: 16px;"
                />
                <van-row class="assessmentDepartmentViewStyle">
                    <van-col span="8">
                        <span style="margin-left: 14px;">考核科室</span>
                    </van-col>
                    <van-col span="16">
                        <van-popover
                                v-model="showPopoverDep"
                                trigger="click"
                                placement="bottom-start"
                                :actions="actionsDataListDep"
                                @select="onSelect"
                                :get-container="getContainer"
                        >
                            <template #reference>
                                <van-button type="primary"
                                            class="popoverBtnStyle"
                                            size="small"
                                            name="assessmentDepartmentName"
                                            v-model="assessmentDepartmentName"
                                            v-text="assessmentDepartmentName"
                                            native-type="button"
                                >
                                    {{assessmentDepartmentName}}
                                </van-button>
                            </template>
                        </van-popover>
                    </van-col>
                </van-row>
                <van-popup v-model="showDepartment" position="bottom" :style="{ height: '30%' }">
                    <van-picker
                            title="请选择考核科室"
                            show-toolbar
                            :columns="departmentList"
                            @confirm="onConfirmDepartment"
                            @cancel="onCancelDepartment"
                    />
                </van-popup>
            </div>
            <div class="footerViewStyle">
                <van-button block type="info" native-type="submit" style="background-color: #4C87FE;">保存</van-button>
            </div>
        </van-form>

---

以上便是此次分享的全部内容，希望能对大家有所帮助！