微信小程序新增了editor-portal组件，使用uni-app编译后传至key丢失

微信小程序新增了editor-portal组件，使用uni-app编译后传至key丢失

开发环境 版本号 项目创建方式
Mac 15.3.1 HBuilderX

产品分类：uniapp/小程序/微信

示例代码：

<block v-for="(item,idx) in customBlockList" :key="idx">  
    <editor-portal :key="item.blockId">  
        <view class="flex">  
            <view>{{item.blockId}}</view>  
            <view>{{item.text}}</view>  
        </view>   
    </editor-portal>  
</block>

编译小程序后的代码

<block><editor-portal vue-id="{{'019b57bf-'+idx}}" bind:__l="__l" vue-slots="{{['default']}}"><view class="flex"><view>{{item.blockId}}</view><view>{{item.text}}</view></view></editor-portal></block>

操作步骤：

<block v-for="(item,idx) in customBlockList" :key="idx">  
    <editor-portal :key="item.blockId">  
        <view class="flex">  
            <view>{{item.blockId}}</view>  
            <view>{{item.text}}</view>  
        </view>   
    </editor-portal>  
</block>

编译小程序后的代码

<block><editor-portal vue-id="{{'019b57bf-'+idx}}" bind:__l="__l" vue-slots="{{['default']}}"><view class="flex"><view>{{item.blockId}}</view><view>{{item.text}}</view></view></editor-portal></block>

预期结果：

<editor-portal key="{{item.blockId}}" vue-id="{{'019b57bf-'+idx}}" bind:__l="__l" vue-slots="{{['default']}}"><view class="flex"><view>{{item.blockId}}</view><view>{{item.text}}</view></view></editor-portal>

实际结果：

<editor-portal vue-id="{{'019b57bf-'+idx}}" bind:__l="__l" vue-slots="{{['default']}}"><view class="flex"><view>{{item.blockId}}</view><view>{{item.text}}</view></view></editor-portal>

更多关于微信小程序新增了editor-portal组件，使用uni-app编译后传至key丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

您好，麻烦提供一个可复现的demo

更多关于微信小程序新增了editor-portal组件，使用uni-app编译后传至key丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uniapp不支持block和 editor-portal 吗？编译都不成功

感谢反馈，我测试了一下，能复现你这个问题，已加分。你试试下面我发的内容能不能正常运行

去掉block，把v-for写在 editor-portal 上面

<editor id="editor"> <editor-portal v-for="(item,idx) in customBlockList" :key="item.blockId"> <view class="flex"> <view>{{item.blockId}}</view> <view>{{item.text}}</view> </view> </editor-portal> </editor>

实测vue也会编译失败

这是uni-app编译微信小程序时的一个已知问题。在编译过程中，editor-portal组件的key属性会被过滤掉，导致最终生成的代码中缺少key属性。

解决方案：

  1. 使用wx:key替代:key
<editor-portal wx:key="item.blockId">
  1. 或者改用动态id绑定
<editor-portal :id="'portal-'+item.blockId">
回到顶部