belowfox
belowfox
  • 发布:2019-07-22 15:20
  • 更新:2019-07-25 09:31
  • 阅读:167

【报Bug】app中使用v-for无法引用对象属性作为参数

分类:uni-app

环境

全是官方推荐最新稳定版环境,并且是新建的demo,bug只需1分钟即可复现!求官方大佬重视一下

  • 最新2.1.1版hbuilderX
  • 用hbuilderX创建的项目,
  • 新版编译器,自定义编译器模式"usingComponents" : true
  • app端安卓官方基座9.5.10版,小米和华为均测试过

详情

我自己写项目的时候遇到的bug,一度怀疑自己项目有毒,然后我重新建个demo,bug依然复现!!!
至简重现:HbuilderX新建项目-uni-app项目-默认模板,然后将下面代码复制到index.vue中,项目代码已上传到附件,
index.vue代码:

<template>  
    <view>  
        12345  
        <view v-for="(item,idx) in arr" :key="idx">  
            <!-- 直接显示object[item],不报错 -->  
            <view>正常:{{ object[item]}}</view>  

            <!-- 下面两句在h5正常,在app运行就报错!! -->  
            <!-- 将object[item]作为方法参数传递 -->  
            <view>方法传参会报错:{{myfun(object[item]) }}</view>  
            <!-- 将object[item]作为过滤器参数 -->  
            <view>过滤器也报错:{{(object[item])|number }}</view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                arr: ['attr1', 'attr2'],  
                object: {  
                    'attr1': 0.1,  
                    'attr2': 0.2,  
                },  
            };  
        },  
        methods: {  
            myfun(param) {  
                return '' + param  
            },  
        },  
        filters: {  
            number(param) {  
                return '' + param  
            }  
        }  
    }  
</script>  

问题描述:

v-for循环列表中,引用数组元素,作为参数传入方法或者过滤器时,报错.且错误只在app(我的环境是安卓)上发生,h5中表现正常.
h5正常显示截图:

app不正常显示截图:

报错信息:

15:14:45.369 [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.  
15:14:45.410 (found in pages/index/index)  

报错截图:

联系方式

可私信,可qq,坐等官方解决问题,很急
qq 532430012

2019-07-22 15:20 分享
已邀请:
wenju

wenju - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

建议你改成在methods中取值 就不会报错了

<view>方法传参:{{myfun(objectA,item) }}</view>    

myfun(objectA,item) {    
                return '' + objectA[item]    
            }  
  • belowfox (作者)

    感谢,这样确实是可以绕过问题.

    不过这样改使得我项目代码很不优雅..

    官方不是号称"uni-app 完整支持 Vue 模板语法。",这在h5上正常,在app上报错的问题,应该是个bug吧?

    2019-07-25 09:51

belowfox

belowfox (作者)

顶一下,求官方重视,我第二次发这个问题了,将demo精简得最简单了,1分钟都不用就看出来问题了啊!!!

belowfox

belowfox (作者)

没有官方人员来看看吗,这么明显的bug

香蕉不是笨啦啦

香蕉不是笨啦啦 - 哈哈哈

模板语法
uni-app 完整支持 Vue 模板语法。

详见Vue官方文档:模板语法。

注意 如果使用老版的非自定义组件模式,即manifest中"usingComponents":false,部分模版语法不支持,但此模式已不再推荐使用,详见。

老版非自定义组件模式不支持情况(新版自定义组件已不存在此情况):

不支持部分复杂的 JavaScript 渲染表达式
不支持过滤器

  • belowfox (作者)

    你看我问题描述里面的环境,全是最新的,不存在你说的老版问题

    2019-07-24 14:24

  • belowfox (作者)

    你把我代码复制到你随便一个项目,也能复现问题. 就上面那一页代码,新建个页面试试

    2019-07-24 14:26

文氓

文氓

computed也可以吧

  • belowfox (作者)

    computed不能传参,满足不了上面的需求.上面只是demo,我真实需求是arr是动态的,所以要以参数传递的形式

    2019-07-25 09:34

要回复问题请先登录注册