商标做网站logo,建网站作业,专门建立网站的公司吗,国内新闻最新消息今天热点大事目录 场景问题代码结果问题剖析解决方案 场景 uni-forms官方组件地址 使用uniapp官方提供的组件#xff0c;某个表单需求#xff0c;单位性质字段如果是高校#xff0c;那么工作单位则是高校的下拉选择格式#xff0c;单位性质如果是其他的类型#xff0c;工作单位则是手动… 目录 场景问题代码结果问题剖析解决方案 场景 uni-forms官方组件地址 使用uniapp官方提供的组件某个表单需求单位性质字段如果是高校那么工作单位则是高校的下拉选择格式单位性质如果是其他的类型工作单位则是手动输入的输入框格式的。 问题代码
uni-forms refform :modelValueformData :rulesrules classform-box err-show-typetoast label-width120px border!-- ...只放了一些主要代码... --uni-forms-item label单位性质 nameunitCategory requiredz-picker dict-typeicm_unit_category v-modelformData.unitCategory/z-picker/uni-forms-itemuni-forms-itemlabel工作单位nameunitNamerequiredv-ifformData.unitCategory ! 1uni-easyinput v-modelformData.unitName placeholder请输入 :input-borderfalse maxlength50 //uni-forms-itemuni-forms-itemlabel工作单位nametenantIdrequiredv-ifformData.unitCategory 1z-selectv-modelformData.tenantIdurl/admin-api/system/tenant/list:query-params{ pageNo: 1, pageSize: 100, unitCategory: 1 }search-keynameresult-keylistlabel-keynamecurr-item(item) (formData.unitName item.name)/z-select/uni-forms-item!-- ...只放了一些主要代码... --
/uni-formsview classflex-item-center btns fixed-bottom-boxbutton typeprimary plain classsave-btn clicksave暂 存/buttonbutton typeprimary classsubmit-btn clicksubmit提 交/button
/viewsubmit: $debounce.throttle(async function () {await this.$refs.form.validate()// ... 其他提交逻辑代码
}) 结果 点击提交结果提示提交的字段[tenantId]在数据库中并不存在 问题剖析 出现这个问题是因为v-if导致的初始的时候条件没有满足导致相应的dom没有渲染后续虽然满足了条件dom渲染了但是由于ui-forms组件等原因并没有正确获取的重新渲染后的dom中的变量 解决方案
方案1给v-if绑定的元素加key
uni-forms-itemlabel工作单位nameunitNamerequiredv-ifformData.unitCategory ! 1:keyformData.unitCategory
uni-easyinput v-modelformData.unitName placeholder请输入 :input-borderfalse maxlength50 /
/uni-forms-item
uni-forms-itemlabel工作单位nametenantIdrequiredv-ifformData.unitCategory 1:keyformData.unitCategory
z-selectv-modelformData.tenantIdurl/admin-api/system/tenant/list:query-params{ pageNo: 1, pageSize: 100, unitCategory: 1 }search-keynameresult-keylistlabel-keynamecurr-item(item) (formData.unitName item.name)/z-select
/uni-forms-item方案2给v-if的元素再套一层父元素如template并将v-if放到父元素上面
template v-ifformData.unitCategory ! 1uni-forms-itemlabel工作单位nameunitNamerequireduni-easyinput v-modelformData.unitName placeholder请输入 :input-borderfalse maxlength50 //uni-forms-item
/template
template v-ifformData.unitCategory 1uni-forms-itemlabel工作单位nametenantIdrequiredz-selectv-modelformData.tenantIdurl/admin-api/system/tenant/list:query-params{ pageNo: 1, pageSize: 100, unitCategory: 1 }search-keynameresult-keylistlabel-keynamecurr-item(item) (formData.unitName item.name)/z-select/uni-forms-item
/template完美解决。
