1***@qq.com
1***@qq.com
  • 发布:2022-09-14 10:26
  • 更新:2024-03-11 09:23
  • 阅读:711

【报Bug】uniapp vue3.0开发小程序,在v-for循环中使用slot,name的值只能是固定字符串,动态拼接的值不生效

分类:uni-app

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

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.5.1

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

第三方开发者工具版本号: 1.06.2209070darwin-arm64

基础库版本号: 2.26.0

项目创建方式: HBuilderX

示例代码:
<template>  
  <view class="wrapper">  
    <demo :list="list">  
      <template #before> before </template>  
      <template #key1> 11111111111111 </template>  
      <template #after> after </template>  
    </demo>  
  </view>  
</template>  

<script setup lang="ts">  
  import demo from '@/compontents/demo.vue';  
  import { ref } from 'vue';  

  const list = ref([  
    {  
      key: 'key1',  
      value: 'value1',  
    },  
    {  
      key: 'key2',  
      value: 'value2',  
    },  
    {  
      key: 'key3',  
      value: 'value3',  
    },  
    {  
      key: 'key4',  
      value: 'value4',  
    },  
    {  
      key: 'key5',  
      value: 'value5',  
    },  
  ]);  
</script>  

<style scoped>  
  .wrapper {  
    padding: 200rpx;  
    font-size: 32rpx;  
  }  
</style>  
<template>  
  <view v-for="(item, index) in list" :key="index">  
    <slot name="before">slot:before </slot>  
    <slot :name="item.key">slot:{{ item.key }}</slot>  
    <slot name="after">slot:after </slot>  
  </view>  
</template>  

<script lang="ts">  
  import { defineComponent, PropType } from 'vue';  

  export default defineComponent({  
    props: {  
      list: {  
        type: Array as PropType<any[]>,  
        default: () => [],  
      },  
    },  
    setup() {  
      return {};  
    },  
  });  
</script>  

<style scoped></style>  

操作步骤:

直接运行

预期结果:

插槽内的内容正常显示

实际结果:

没有正常显示

bug描述:

uniapp vue3.0开发小程序,在v-for循环中使用slot,name的值只能是固定字符串,动态拼接的值不生效。

2022-09-14 10:26 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

问题已确认,感谢反馈,已加分

DCloud_UNI_WZF

DCloud_UNI_WZF

HBuilderX 3.7.6 已修复

zZZ1Ma

zZZ1Ma

这个居然是BUG吗,我之前都是拼接一个String的:<slot :name="item-${item}"/> => <template #item-key1/>

x***@163.com

x***@163.com

这个问题解决了吗

  • x***@163.com

    vue3微信小程序动态的 插槽无效

    <template #key1> 11111111111111 </template>

    // 这么写就支持了,可H5却又展示不出来

    <template slot="key1"> 11111111111111 </template>

    2024-03-11 09:31

  • HRK_01

    回复 x***@163.com: 能否提供一个测试工程附件

    2024-03-11 15:09

  • x***@163.com

    回复 HRK_01: 你看看这个 https://gitee.com/hong_shuang/uni-vue3-ts-demo

    2024-03-11 16:36

要回复问题请先登录注册