uni-app代码编译成微信小程序代码时，相同的动态key，v-model和其他标签（如v-show）编译结果不同导致绑定失败

uni-app代码编译成微信小程序代码时，相同的动态key，v-model和其他标签（如v-show）编译结果不同导致绑定失败 产品分类：uniapp/小程序/微信
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：windows10
HBuilderX类型：正式
HBuilderX版本号：3.2.9
第三方开发者工具版本号：1.05.2110110
基础库版本号：2.19.5
项目创建方式：HBuilderX

操作步骤：

<uni-data-picker v-if="info.isSelectBox" v-model="formData[info.fieldCode]" @change="changeSelected" :pickerId="info.fieldCode" :popupTitle="'请选择' + info.label" localdata="pickerData[info.fieldCode]" :placeholder="info.placeholder"></uni-data-picker>

预期结果：

<uni-data-picker vue-id="{{(''+index+'-'+idx)+','+(''+index+'-'+idx)}}" pickerId="{{info.$orig.fieldCode}}" popupTitle="{{'请选择'+info.$orig.label}}" localdata="{{pickerData[info.$orig.fieldCode]}}" placeholder="{{info.$orig.placeholder}}" value="{{formData[info.$orig.fieldCode]}}" data-event-opts="{{[['^change',[['changeSelected']]],['^input',[['__set_model',['$0','$1','$event',[]],['formData',[['templateList','',index],['infoList','',idx,'fieldCode']]]]]]]}}" bind:change="e" bind:input="e" bind:l="l"></uni-data-picker>

实际结果：

<uni-data-picker vue-id="{{(''+index+'-'+idx)+','+(''+index+'-'+idx)}}" pickerId="{{info.$orig.fieldCode}}" popupTitle="{{'请选择'+info.$orig.label}}" localdata="{{pickerData[info.$orig.fieldCode]}}" placeholder="{{info.$orig.placeholder}}" value="{{formData[info.fieldCode]}}" data-event-opts="{{[['^change',[['changeSelected']]],['^input',[['__set_model',['$0','$1','$event',[]],['formData',[['templateList','',index],['infoList','',idx,'fieldCode']]]]]]]}}" bind:change="e" bind:input="e" bind:l="l"></uni-data-picker>

更多关于uni-app代码编译成微信小程序代码时，相同的动态key，v-model和其他标签（如v-show）编译结果不同导致绑定失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app代码编译成微信小程序代码时，相同的动态key，v-model和其他标签（如v-show）编译结果不同导致绑定失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的 uni-app 动态 key 编译问题。从你提供的编译结果对比可以看出：

核心问题： 在 v-model="formData[info.fieldCode]" 编译后，value 属性的绑定路径不一致：

  • 预期：value="{{formData[info.$orig.fieldCode]}}"
  • 实际：value="{{formData[info.fieldCode]}}"

而其他属性如 pickerId、popupTitle 等都正确编译为 info.$orig.fieldCode。

原因分析： 这是 uni-app 编译器在处理动态 key 时的内部逻辑不一致导致的。v-model 的编译逻辑与其他属性绑定的编译逻辑存在差异，特别是在处理嵌套数据结构和动态 key 时。

解决方案：

  1. 临时解决方案：将 v-model 拆分为 :value 和 [@input](/user/input) 手动绑定
<uni-data-picker 
  v-if="info.isSelectBox" 
  :value="formData[info.fieldCode]" 
  [@input](/user/input)="val => formData[info.fieldCode] = val"
  [@change](/user/change)="changeSelected" 
  :pickerId="info.fieldCode" 
  :popupTitle="'请选择' + info.label" 
  :localdata="pickerData[info.fieldCode]" 
  :placeholder="info.placeholder">
</uni-data-picker>
回到顶部