描述中的代码随便复制到一个页面就可以复现, 附件有完整demo.
belowfox
- 发布：2020-07-27 10:56
- 更新：2021-06-27 08:31
- 阅读：1992
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.7.14
第三方开发者工具版本号： 1.03.2006090
基础库版本号： 2.12.0
项目创建方式： HBuilderX
操作步骤：
预期结果：
预期小程序端和h5端一样,见附件
预期小程序端和h5端一样,见附件
实际结果：
实际h5正常,小程序不正常!
实际h5正常,小程序不正常!
bug描述：
先上代码:
<template>
<view>
<view style="color: red;"> bug:在v-for循环中,使用v-for的变量作为对象的key获取的value,并且作为方法或者过滤器的参数,在小程序端会报错!!表述不太清楚请看看代码,一看就明白了!!
结果演示:</view>
<view v-for="(item, idx) in arr" :key="idx">
<view>用循环变量作为对象属性key获取属性值,均正常:
<view style="color: blue;">{{ object[item] }} </view>
</view>
<view>用循环变量作为对象属性key,传入方法参数,H5中正常,小程序中报错:</view>
<view style="color: blue;">{{ myMethod(object[item]) }}</view>
<view>用循环变量作为对象属性key,传入过滤器参数,H5中正常,小程序中报错:</view>
<view style="color: blue;">{{ object[item] | myFilter }}</view>
<view>---</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
arr: ['attr1', 'attr2'],
object: {
attr1: '1',
attr2: '2',
},
};
},
computed: {},
methods: {
myMethod(param) {
return '方法' + param;
},
},
filters: {
myFilter(param) {
return '过滤器' + param;
},
},
};
</script>
小程序工具报错提示:
VM63:1 [Vue warn]: Property or method "item" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in pages/index/index.vue)运行效果参考附件,图1是小程序的不正常,图2图2是h5和app的正常显示
上面的代码完全遵循vue语法,在h5端和app端正常,在小程序端就不正常!
集齐下面的几个要素出bug:
①在小程序端,
②在v-for中,声明了循环变量,即v-for="item in arr"的item,
③将变量作为data中的对象的属性的key,如object[item],object是data中声明的对象,直接使用object[item]是没有问题的,但
④将object[item]作为方法的参数或过滤器的参数,就会出bug!!
题外话:
这么明显的bug存在时间很长了, 这个bug去年在app端也存在,当时我也发过帖子https://ask.dcloud.net.cn/question/75250, 没人回复,没人重视. 后来app没这个bug了,不知道是专门修复了还是某些底层代码升级无意中解决了这个bug. 总之现在小程序端还有这个bug, 完全规范的基础vue语法无法正常使用,让人费解.
求官方人员重视!!
HBuilderX 2.8.4 alpha 已修复
-
提问您一下 我在<view :style="[2 | guolvqi]"></view> APP和H5正常，但是小程序报错vendor.js? [sm]:61 [Vue warn]: Property or method "guolvqi" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
2021-08-19 15:24
belowfox (作者)
请问改起来快吗,下一版可以修复吗?
2020-07-29 11:13
jxtian
回复 belowfox: 已处理，下一版更新
2020-07-29 11:17