uniapp 之 uni-forms校验提示【提交的字段[‘xxx‘]在数据库中并不存在】解决方案

场景

  uni-forms官方组件地址

  使用uniapp官方提供的组件，某个表单需求，单位性质字段如果是高校，那么工作单位则是高校的下拉选择格式，单位性质如果是其他的类型，工作单位则是手动输入的输入框格式的。

  

问题代码

<uni-forms ref="form" :modelValue="formData" :rules="rules" class="form-box" err-show-type="toast" label-width="120px" border>
	<!-- ...只放了一些主要代码... -->
	<uni-forms-item label="单位性质" name="unitCategory" required>
        <z-picker dict-type="icm_unit_category" v-model="formData.unitCategory"></z-picker>
    </uni-forms-item>
    <uni-forms-item
        label="工作单位"
        name="unitName"
        required
        v-if="formData.unitCategory != 1"
    >
        <uni-easyinput v-model="formData.unitName" placeholder="请输入" :input-border="false" maxlength="50" />
    </uni-forms-item>
    <uni-forms-item
        label="工作单位"
        name="tenantId"
        required
        v-if="formData.unitCategory == 1"
    >
        <z-select
            v-model="formData.tenantId"
            url="/admin-api/system/tenant/list"
            :query-params="{ pageNo: 1, pageSize: 100, unitCategory: 1 }"
            search-key="name"
            result-key="list"
            label-key="name"
            @curr-item="(item) => (formData.unitName = item.name)"
        ></z-select>
    </uni-forms-item>
    <!-- ...只放了一些主要代码... -->
</uni-forms>

<view class="flex-item-center btns fixed-bottom-box">
    <button type="primary" plain class="save-btn" @click="save">暂 存</button>
    <button type="primary" class="submit-btn" @click="submit">提 交</button>
</view>

submit: $debounce.throttle(async function () {
	await this.$refs.form.validate()
	// ... 其他提交逻辑代码
})         

  

结果

  点击提交结果提示：提交的字段['tenantId']在数据库中并不存在

  

问题剖析

  出现这个问题是因为v-if导致的，初始的时候条件没有满足，导致相应的dom没有渲染，后续虽然满足了条件，dom渲染了，但是由于ui-forms组件等原因并没有正确获取的重新渲染后的dom中的变量；

  

解决方案

• 方案1：给v-if绑定的元素加key

<uni-forms-item
    label="工作单位"
    name="unitName"
    required
    v-if="formData.unitCategory != 1"
    :key="formData.unitCategory"
>
    <uni-easyinput v-model="formData.unitName" placeholder="请输入" :input-border="false" maxlength="50" />
</uni-forms-item>
<uni-forms-item
    label="工作单位"
    name="tenantId"
    required
    v-if="formData.unitCategory == 1"
    :key="formData.unitCategory"
>
    <z-select
        v-model="formData.tenantId"
        url="/admin-api/system/tenant/list"
        :query-params="{ pageNo: 1, pageSize: 100, unitCategory: 1 }"
        search-key="name"
        result-key="list"
        label-key="name"
        @curr-item="(item) => (formData.unitName = item.name)"
    ></z-select>
</uni-forms-item>

• 方案2：给v-if的元素再套一层父元素如<template>，并将v-if放到父元素上面

<template v-if="formData.unitCategory != 1">
	<uni-forms-item
	    label="工作单位"
	    name="unitName"
	    required
	>
	    <uni-easyinput v-model="formData.unitName" placeholder="请输入" :input-border="false" maxlength="50" />
	</uni-forms-item>
</template>
<template v-if="formData.unitCategory == 1">
	<uni-forms-item
	    label="工作单位"
	    name="tenantId"
	    required
	>
	    <z-select
	        v-model="formData.tenantId"
	        url="/admin-api/system/tenant/list"
	        :query-params="{ pageNo: 1, pageSize: 100, unitCategory: 1 }"
	        search-key="name"
	        result-key="list"
	        label-key="name"
	        @curr-item="(item) => (formData.unitName = item.name)"
	    ></z-select>
	</uni-forms-item>
</template>

完美解决。