uni-app v-for中使用自定义组件的v-model，当使用方法或过滤器且参数传入循环项item或index时，v-model失效。此种情况原生input正常。

uni-app v-for中使用自定义组件的v-model，当使用方法或过滤器且参数传入循环项item或index时，v-model失效。此种情况原生input正常。

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

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

示例代码：

<view v-for="(item,index) in flags" :key="index">  
    <uni-easyinput v-model="formData[item.name]" />  
    <view>{{someMethod(item)}}</view>  
</view>

export default {  
    data() {  
        return {  
            flags: [{  
                name: 'date1'  
            },{  
                name: 'date2'  
            }],  
            formData: {  
                date1: '2030-02-16',  
                date2: '2030-02-17'  
            },  
        }  
    },  
    methods: {  
        someMethod(){}  
    }  
}

更多关于uni-app v-for中使用自定义组件的v-model，当使用方法或过滤器且参数传入循环项item或index时，v-model失效。此种情况原生input正常。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

这种情况是要放弃v-model 用 :value 绑定input事件 来写么？

更多关于uni-app v-for中使用自定义组件的v-model，当使用方法或过滤器且参数传入循环项item或index时，v-model失效。此种情况原生input正常。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


重大bug 原生的没问题，唉 这框架恶心

这个问题怎么解决啊?我也遇到了，官方人不回复的吗？

只有小程序端有这个问题，其他端都是可以的 @DCloud_UNI_LXH

小程序上框架对自定义组件v-model处理有些问题，bug已确认 ，排期修复中

在 uni-app 中使用 v-for 渲染自定义组件，并且在 v-model 中使用方法或过滤器，且参数传入循环项 item 或 index 时，v-model 失效的问题，通常是由于 Vue 的数据绑定机制和组件的更新机制导致的。

问题分析

v-model 是 Vue 中的语法糖，它实际上是 :value 和 @input 的组合。当你在自定义组件中使用 v-model 时，Vue 会监听 input 事件来更新绑定的数据。但是，如果你在 v-model 中使用方法或过滤器，并且传入 item 或 index，可能会导致 Vue 无法正确追踪数据的变化，从而导致 v-model 失效。

解决方案

1. 直接绑定数据

尽量避免在 v-model 中使用方法或过滤器。你可以直接在 v-model 中绑定 item 的某个属性，而不是通过方法或过滤器来获取数据。

<template>
  <div v-for="(item, index) in list" :key="index">
    <custom-component v-model="item.value"></custom-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { value: '' },
        { value: '' },
        // ...
      ]
    };
  }
};
</script>

2. 使用计算属性

如果你需要在 v-model 中使用复杂逻辑，可以使用计算属性来代替方法或过滤器。

<template>
  <div v-for="(item, index) in list" :key="index">
    <custom-component v-model="computedValue(item)"></custom-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { value: '' },
        { value: '' },
        // ...
      ]
    };
  },
  methods: {
    computedValue(item) {
      // 在这里处理复杂的逻辑
      return item.value;
    }
  }
};
</script>

3. 手动处理 input 事件

如果上述方法无法满足需求，你可以手动处理 input 事件，并在事件处理函数中更新数据。

<template>
  <div v-for="(item, index) in list" :key="index">
    <custom-component :value="item.value" @input="updateValue(index, $event)"></custom-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { value: '' },
        { value: '' },
        // ...
      ]
    };
  },
  methods: {
    updateValue(index, value) {
      this.list[index].value = value;
    }
  }
};
</script>
回到顶部