注册登录

3***@qq.com

发布：2022-04-14 19:44
更新：2022-04-15 15:21
阅读：1021

【报Bug】v-for在支付宝小程序中失效

分类：uni-app

bug反馈

产品分类： uniapp/小程序/阿里

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： macOS Big Sur

HBuilderX类型：正式

HBuilderX版本号： 3.3.13

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

基础库版本号： 2.7.11

项目创建方式： HBuilderX

操作步骤：

04-10补充:
为此准备了一段简单的代码进行测试: hometest.vue

<template>  
    <view>  
        <view class="cu-list grid col-3 text-sm">  
            <block v-for="(item,index) in testList" :key="item.id">  
                <view>{{item.testStr}}</view>  
            </block>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                testList: [{  
                        id: 1,  
                        testStr: '1'  
                    },  
                    {  
                        id: 2,  
                        testStr: '2'  
                    },  
                ]  
            }  
        },  
        methods: {  

        }  
    }  
</script>  
<style>  
</style>

支付宝小程序中没有被渲染

预期结果：

可以循环渲染出view

实际结果：

所有v-for失效

bug描述：

<swiper class="screen-swiper square-dot"  :indicator-dots="true" :circular="true"  
             :autoplay="true" interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">  
        <swiper-item v-for="(item,index) in swiperList" :key="index">  
        <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>  
    </swiper-item>  
</swiper>

不只是swiper view什么的也都失效了

2022-04-14 19:44 负责人:无分享

9 个回复

3***@qq.com (作者)

使用a:for也无效, 是不是我写法有问题?

<swiper-item a:for="{{swiperList}}">  
    <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>  
</swiper-item>

3***@qq.com (作者)

<swiper-item a:for="{{swiperList}}">    
    <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>    
</swiper-item>

使用这个话会直接报错:

22:44:19.431   Errors compiling template:  
22:44:19.434   a:for="{{swiperList}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.  
22:44:19.434   7  |       interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">  
22:44:19.435   8  |    
22:44:19.436   9  |       <swiper-item a:for="{{swiperList}}">  
22:44:19.437      |                  ^^^^^^^^^^^^^^^^^^^^^^  
22:44:19.438   10 |         <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>  
22:44:19.440   11 |       </swiper-item>  
22:44:19.440  at /Users/yilong/Documents/idea/officeboot/uniapp/office-uniapp/pages/home/home.vue:0

2***@qq.com

可以使用啊。不知道是不是v-for不能使用在组件里
你可以试试这样的

                <swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">  
                    <block v-for="(item,index) in lunboList" :key="item.id">  
                        <swiper-item>  
                            <image :src="item.adPicture" mode="scaleToFill" class="swiper_pic"></image>  
                        </swiper-item>  
                    </block>  
                </swiper>

3***@qq.com (作者)

您好, 谢谢您的回答, 我把截图放在底下

2022-04-15 14:18

DCloud_UNI_GSQ

使用 3.4.5 版本测试一下
将编译后的文件截图看下

3***@qq.com (作者)

您好, 感谢回答, 我把截图放在底下

2022-04-15 14:19
3***@qq.com (作者)

您好, 因为我这个home是一个tab的首页, 所以我在main.js中使用:

import home from './pages/home/home.vue'

Vue.component('home',home)

然后在index.vue中:

<home :cur="PageCur" v-if="PageCur=='home'" :key="commponent1Key"></home>

这样的话在支付宝小程序中, v-for是不会被渲染的, 其他小程序可以, 这样的话有什么解决方法吗?

2022-04-15 21:03

3***@qq.com (作者)

@2***@qq.com

3***@qq.com (作者)

@DCloud_UNI_GSQ

3***@qq.com (作者)

我为此准备了一段简单的代码进行测试: hometest.vue

<template>  
    <view>  
        <view class="cu-list grid col-3 text-sm">  
            <block v-for="(item,index) in testList" :key="item.id">  
                <view>{{item.testStr}}</view>  
            </block>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                testList: [{  
                        id: 1,  
                        testStr: '1'  
                    },  
                    {  
                        id: 2,  
                        testStr: '2'  
                    },  
                ]  
            }  
        },  
        methods: {  

        }  
    }  
</script>  
<style>  
</style>

下面是分别运行在微信小程序和支付宝小程序的截图

2***@qq.com

还是不行吗?我刚刚启动看了下没问题啊。。你把我的那串代码复制上去，可以直接用。

2022-04-15 15:06

2***@qq.com

如下图
第一张是hbx上的代码
第二张是支付宝开发者工具上的代码

2***@qq.com

..调试器

3***@qq.com (作者)

我是复制的您的代码, 是不是我要降低基础库的版本, 您基础库是什么版本, 或者使用windows来进行编译?

2022-04-15 18:31
2***@qq.com

回复 3***@qq.com: 不用吧，我是运行到支付宝开发者工具上运行的，要不你把编辑器更新到最新版本。我也不知道啥问题

2022-04-15 18:39
2***@qq.com

回复 2***@qq.com: 微信小程序也不行？？？见了鬼

2022-04-15 18:40
2***@qq.com

你是把swiper放到你自定义的组件里了？你放外面先试试能不能渲染

2022-04-15 18:42
3***@qq.com (作者)

谢谢您, 我看了一下, 我们编译出来的代码差异挺大的, 我试一下用windows下

2022-04-15 18:42
2***@qq.com

有可能是数据先执行，页面后执行..你自己打个debugger调试下吧。

2022-04-15 18:43
2***@qq.com

回复 3***@qq.com: 我截图的那个调试代码是支付宝开发者工具里的调试器你看看是不是一样的

2022-04-15 18:44
3***@qq.com (作者)

回复 2***@qq.com: 微信小程序是可以的, 就支付宝小程序不行, 然后我发现没有在自定义组件中是可以的

2022-04-15 21:00
3***@qq.com (作者)

回复 2***@qq.com: 您好, 因为我这个home是一个tab的首页, 所以我在main.js中使用:

import home from './pages/home/home.vue'

Vue.component('home',home)

然后在index.vue中:

<home :cur="PageCur" v-if="PageCur=='home'" :key="commponent1Key"></home>

这样的话在支付宝小程序中, v-for是不会被渲染的, 其他小程序可以, 这样的话有什么解决方法吗?

2022-04-15 21:03
2***@qq.com

回复 3***@qq.com: 你可以在组件代码里先渲染啊。。这个样就不要操心那么多了

2022-04-18 10:12

该问题目前已经被锁定, 无法添加新回复

【报Bug】v-for在支付宝小程序中失效

预期结果：

可以循环渲染出view

实际结果：

所有v-for失效

bug描述：

9 个回复

公告

相关问题

【报Bug】v-for在支付宝小程序中失效

预期结果： 可以循环渲染出view

实际结果： 所有v-for失效

bug描述：

与内容相关的链接

9 个回复

公告

相关问题

预期结果：

可以循环渲染出view

实际结果：

所有v-for失效