1***@qq.com
1***@qq.com
  • 发布:2024-12-04 18:05
  • 更新:2024-12-04 18:05
  • 阅读:18

【报Bug】vue3 + 支付宝小程序,插槽在数据变更后,视图更新期间,插槽内部的组件接收的props数据是错的,微信小程序/h5平台正常

分类:uni-app

产品分类: uniapp/小程序

PC开发环境操作系统: Mac

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

第三方开发者工具版本号: 最新

基础库版本号: 最新

项目创建方式: CLI

CLI版本号: 3.0.0-4020920240930001

示例代码:
<route lang="json5" type="page">  
{  
  layout: 'default',  
  style: {  
    navigationBarTitleText: '测试',  
  },  
}  
</route>  

<template>  
  <QueryList :list-data="mockListData">  
    <template #default="{ listData }">  
      <wd-checkbox-group :modelValue="curValue" @change="onChange" cell shape="square">  
        <wd-checkbox  
          v-for="option in listData"  
          :modelValue="option.value"  
          :key="option.value"  
          shape="square"  
        >  
          <view>{{ option.label }} {{ option.value }}</view>  
        </wd-checkbox>  
      </wd-checkbox-group>  
    </template>  
  </QueryList>  
</template>  

<script lang="ts" setup>  
import QueryList from './components/queryList.vue'  

const curValue = ref([])  
const onChange = ({ value }) => {  
  console.log('onChange value', value)  
  curValue.value = value  
}  
const mockListData = ref([  
  { label: '测试1', value: 1 },  
  { label: '测试2', value: 2 },  
  { label: '测试3', value: 3 },  
  { label: '测试4', value: 4 },  
])  
</script>  

<style lang="scss" scoped>  
//  
</style>  

querylist.vue

<template>  
  <view>  
    <slot :listData="listData"></slot>  
  </view>  
</template>  

<script lang="ts" setup>  
defineProps({  
  listData: {  
    type: Array,  
    default: () => [],  
  },  
})  
</script>  

<style lang="scss" scoped>  
//  
</style>  

操作步骤:

1.下载demo项目,然后pnpm i && pnpm dev:mp-alipay。

  1. 支付宝开发工具打开dist/dev/mp-alipay。任意勾选checkbox,控制台会有waring。

预期结果:

每次render拿到的props数据都正常

实际结果:

第一次render拿到的props数据正常,第二次为undefined

bug描述:

项目背景: vue3(3.0.0-4030620241128001) + wot-design-ui。demo附件已上传。

通过组件暴露的default插槽,props.modelValue第一次拿到的数据正常,点击勾选后,wd-checkbox的props.modelValue异常,拿到unfined,导致了后续的勾选交互异常。 插槽内的变量模板是正常渲染的。

2024-12-04 18:05 负责人:无 分享
已邀请:

要回复问题请先登录注册