場景

??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-itemlabel="工作單位"name="unitName"requiredv-if="formData.unitCategory != 1"><uni-easyinput v-model="formData.unitName" placeholder="請輸入" :input-border="false" maxlength="50" /></uni-forms-item><uni-forms-itemlabel="工作單位"name="tenantId"requiredv-if="formData.unitCategory == 1"><z-selectv-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']在數(shù)據(jù)庫中并不存在

??

問題剖析

??出現(xiàn)這個問題是因為v-if導致的，初始的時候條件沒有滿足，導致相應的dom沒有渲染，后續(xù)雖然滿足了條件，dom渲染了，但是由于ui-forms組件等原因并沒有正確獲取的重新渲染后的dom中的變量；

??

解決方案

• 方案1：給v-if綁定的元素加key

<uni-forms-itemlabel="工作單位"name="unitName"requiredv-if="formData.unitCategory != 1":key="formData.unitCategory"
><uni-easyinput v-model="formData.unitName" placeholder="請輸入" :input-border="false" maxlength="50" />
</uni-forms-item>
<uni-forms-itemlabel="工作單位"name="tenantId"requiredv-if="formData.unitCategory == 1":key="formData.unitCategory"
><z-selectv-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-itemlabel="工作單位"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-itemlabel="工作單位"name="tenantId"required><z-selectv-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>

完美解決。