zhangdaren
zhangdaren
  • 发布:2019-04-28 09:27
  • 更新:2019-04-28 17:53
  • 阅读:1234

【已解决】hbuildx v1.9.3/v1.9.4里,嵌套v-for里,使用key为index1导致编译报错!

分类:uni-app

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]

hbuildx v1.9.3/v1.9.4里,嵌套v-for里,使用key为index1导致编译报错!而在hbx1.92里是能编译正常的。

如下图所示:
这是设置为key为index1时, 编译报错:

下面为修改key为index2时,编译正常:

重现步骤

[步骤]
复制下面的代码:

<template>  
    <view class="page">  
        <block v-for="(tab, index1) in newsitems" :key="index1">  
            <view><view v-for="item in flData.imgList" :key="item.id"></view></view>  
            <view><view v-for="item in frData.imgList" :key="item.id"></view></view>  
        </block>  
    </view>  
</template>

然后编译即可,编译后报错~!

[结果]

09:23:30.477 Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):  
09:23:30.486 (Emitted value instead of an instance of Error)   
09:23:30.487   Error compiling template:  
09:23:30.495   <view class="page">  
09:23:30.495    <block v-for="(tab, index1) in newsitems" :key="index1">  
09:23:30.504        <view><view v-for="item in flData.imgList" :key="item.id"></view></view>  
09:23:30.505        <view><view v-for="item in frData.imgList" :key="item.id"></view></view>  
09:23:30.513    </block>  
09:23:30.513   </view>  
09:23:30.523   - 同一组件内嵌套的 v-for 不能连续使用相同的索引,目前为: index1,index1

[期望]
编译正常,在hbx 1.92里是正常的。

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HBuilderX

[IDE版本号]
1.9.3.20190422 / 1.9.4.20190426

[windows版本号]
win7

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
小程序

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式?]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]
<template>
<view class="page">
<block v-for="(tab, index1) in newsitems" :key="index1">
<view><view v-for="item in flData.imgList" :key="item.id"></view></view>
<view><view v-for="item in frData.imgList" :key="item.id"></view></view>
</block>
</view>
</template>

联系方式

[QQ]
375890534

2019-04-28 09:27 负责人:无 分享
已邀请:
ZGH0709

ZGH0709

v-for 不能连续使用相同的索引。。你贴你的 数据源看看

  • zhangdaren (作者)

    附上代码:

    <template>

    <view class="page">

    <block v-for="(tab, index1) in list" :key="index1">

    <view v-for="item1 in imgList1" :key="item1.id"></view>

    <view v-for="item2 in imgList2" :key="item2.id"></view>

    </block>

    </view>

    </template>


    <script>

    export default {

    data() {

    return {

    list: [

    {

    name: 'list',

    value: 111111111

    }

    ],

    imgList1: [

    {

    id: '11',

    value: 11

    }

    ],

    imgList2: [

    {

    id: '22',

    value: 22

    }

    ]

    };

    },

    };

    </script>


    拷贝进IDE就可以运行,,,

    可以发现没有一个id是一样的,

    然而怪就怪在,改成index2就可以运行,而且,我昨天运行还是正常的,在我的旧版HBX上。

    2019-04-28 16:15

zhangdaren

zhangdaren (作者) - 小程序转uniapp工具:https://ext.dcloud.net.cn/plugin?id=2656

to 一楼:

<template>  
    <view class="page">  
        <block v-for="(tab, index1) in list" :key="index1">  
                <view v-for="item1 in imgList1" :key="item1.id"></view>  
                <view v-for="item2 in imgList2" :key="item2.id"></view>  
        </block>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            list: [  
                {  
                    name: 'list',  
                    value: 111111111  
                }  
            ],  
            imgList1: [  
                {  
                    id: '11',  
                    value: 11  
                }  
            ],  
            imgList2: [  
                {  
                    id: '22',  
                    value: 22  
                }  
            ]  
        };  
    },  
};  
</script>

而下面的代码是可以正常打包的:

<template>  
    <view class="page">  
        <block v-for="(tab, index2) in list" :key="index2">  
                <view v-for="item1 in imgList1" :key="item1.id"></view>  
                <view v-for="item2 in imgList2" :key="item2.id"></view>  
        </block>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            list: [  
                {  
                    name: 'list',  
                    value: 111111111  
                }  
            ],  
            imgList1: [  
                {  
                    id: '11',  
                    value: 11  
                }  
            ],  
            imgList2: [  
                {  
                    id: '22',  
                    value: 22  
                }  
            ]  
        };  
    },  
};  
</script>
ZGH0709

ZGH0709

bug 未复现,你跑下上面测试代码看是否有问题? 有的话 发个出错 demo?

zhangdaren

zhangdaren (作者) - 小程序转uniapp工具:https://ext.dcloud.net.cn/plugin?id=2656

如附件。

ZGH0709

ZGH0709

使用老的编译模式确实会生成 index1, 可以通过 使用新的编译模式,或者对未指定index 的循环增加 明确的 index 值。


<view v-for="(item1, i1) in imgList1" :key="item1.id"></view>    
<view v-for="(item2, i2) in imgList2" :key="item2.id"></view>  
  • zhangdaren (作者)

    好的,可以了,谢谢~

    2019-04-28 18:04

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