uni-app 微信小程序编译时 v-for 中自定义组件使用 v-model 值传递失败，uni-easyinput 中 value 的 watch 监听不会触发

uni-app 微信小程序编译时 v-for 中自定义组件使用 v-model 值传递失败，uni-easyinput 中 value 的 watch 监听不会触发

产品分类：
uniapp/小程序/微信

PC开发环境操作系统：
Windows

PC开发环境操作系统版本号：
x64

HBuilderX类型：
正式

HBuilderX版本号：
3.1.2

第三方开发者工具版本号：
1.05.21

基础库版本号：
2.4.3

项目创建方式：
HBuilderX

示例代码：

<uni-forms-item :label="prop.showLabel?field.title:''" :required="!!(field.rules&&field.rules.required)" :name="field.fields"  
     v-for="(field,index) in formFields" :key="index">  
    <view v-if="['select'].indexOf(field.type)>-1'" class="code">  
        <view style="flex:1">  
            <uni-easyinput :inputBorder="!!prop.border" type="text" v-model="forms[field.fields]" @input="onInput($event,field.fields)"  
             :placeholder="'请输入'+field.title" @focus="focus" @blur="blur"></uni-easyinput>  
        </view>  
        <view class="verify">  
            <verify-code :mobile="forms[field.fields]" :send-type="field.verify||0"></verify-code>  
        </view>  
    </view>  
</uni-forms-item>

操作步骤：

直接随便写个uni-forms-item 循环，里面嵌套 uni-easyinput 使用v-model 绑定传入值，传入值，使用对象key 值传递，同时v-if 的条件使用判断 例如：[‘select’].indexOf(field.type)>-1

预期结果：

使用v-model uni-easyinput 会自动触发验证

实际结果：

使用v-model uni-easyinput 中的watch value 不会触发，导致验证不会触发

bug描述：

使用v-for 循环自定义组件 v-model 绑定编译的值存在问题直接使用:value 绑定 编译多了一个$orig 使用v-model 编译出来的就没有，导致传值失败, 导致uni-easyinput 中的watch : value 不会触发，验证也就触发不了 ， 判断里面增加一个表达式导致的


更多关于uni-app 微信小程序编译时 v-for 中自定义组件使用 v-model 值传递失败，uni-easyinput 中 value 的 watch 监听不会触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

类似问题: v-for 编译的小程序代码有问题. <block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"> <view class="u-flex u-col-center"> <view> <u-checkbox bind:input="e" vue-id="{{'1775f8c0-'+index}}" shape="circle" active-color="#FF9900" name="{{item.$orig.id}}" value="{{item.checked}}" data-event-opts="{{[['^input',[['set_model',['$0','checked','$event',[]],[[['list','',index]]]]]]]}}" bind:l="l"></u-checkbox> </view> </view> </block>
value 绑定值丢失了$orig
现在我在回退到3.0版本看看有没有这个问题

更多关于uni-app 微信小程序编译时 v-for 中自定义组件使用 v-model 值传递失败，uni-easyinput 中 value 的 watch 监听不会触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


遇到相同问题，求解决

同样问题

@DCloud_HB_WDL

同样问题，求解决方案

转微信小程序，我也遇到了，通过再次把父组件中的值，通过 props 再次传入uni-easyinput 组件中实现的，项目紧张先这样吧 《props》 twovalue: { type: [Number, String], default: ‘’ }, 《watch》 // #ifdef H5 || MP-WEIXIN twovalue(newVal) { this.value = newVal; }, // #endif

直接用 :modelValue更好

改成这样就好了 v-model=“forms[formFields[index].fields]”

这是一个在uni-app微信小程序中使用v-for循环自定义组件时v-model绑定失效的典型问题。主要原因是微信小程序编译时对v-model的处理机制与H5端不同。

问题分析：

  1. 在微信小程序环境下，v-for循环中使用v-model绑定对象属性时，编译后会产生额外的$orig属性
  2. 这导致uni-easyinput组件的value watch无法正确触发
  3. 验证功能也因此无法正常工作

解决方案：

  1. 使用:value和@input替代v-model：
<uni-easyinput 
  :inputBorder="!!prop.border" 
  type="text" 
  :value="forms[field.fields]" 
  [@input](/user/input)="val => forms[field.fields] = val"
  @focus="focus" 
  @blur="blur">
</uni-easyinput>
  1. 或者在data中预定义好对象结构，避免动态属性：
data() {
  return {
    forms: {
      // 预定义所有可能用到的字段
      field1: '',
      field2: ''
    }
  }
}
回到顶部