uni-app编写微信小程序将v-for循环出来的参数传入@change等事件时,报错Property or method “*“ is not defined on the instance

需求:通过v-for循环列表,在列表中包含switch组件,想将switch组件的@change事件绑定为item.onChange 在APP和H5中一直报错
Property or method “child” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
大致意思是child没有定义但是在渲染的时候使用到了。确认在data中定义了或者在类组件中初始化了。但是child是遍历出来的数据呀。
uni-app编写微信小程序将v-for循环出来的参数传入@change等事件时,报错Property or method “*“ is not defined on the instance_第1张图片

大致的代码如下:
uni-app编写微信小程序将v-for循环出来的参数传入@change等事件时,报错Property or method “*“ is not defined on the instance_第2张图片
实际上:value="child.status"并不会报错找不到child,只有在change事件中才会报错。

解决

1.首先不要直接把child.onChange传递给@change,而是通过
@change="change(child.onChange)"这种方式把child.onChange放在方法里面
uni-app编写微信小程序将v-for循环出来的参数传入@change等事件时,报错Property or method “*“ is not defined on the instance_第3张图片
然后在change方法中打印一下item,看是否是undefined,如果是自己传入的方法,直接执行即可。

change(item) {
	console.log(item)
	if(item){
		item()
	}
}

2.如果第一步打印的item为undefined,则检查是否在v-for的组件中定义了key值,将key值设置为index即可。
uni-app编写微信小程序将v-for循环出来的参数传入@change等事件时,报错Property or method “*“ is not defined on the instance_第4张图片

感叹一句:想要一套代码各端兼容真的太难了

你可能感兴趣的:(uni-app,微信小程序,小程序,uni-app)