<!-- list-temp.vue -->
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
<slot :data="item"></slot>
</li>
</ul>
</template>
<script>
prop:['items']
</script>
<!-- main.vue -->
<template>
<list-temp v-slot="{data}">
{{data.creationTime|date}} <!-- undefined -->
{{ getStatus(data.status)}} <!-- 可能导致只显示一条数据-->
</list-temp>
</template>
<script>
method:{
getStatus(){
return '123';
}
}
</script>
- 发布:2022-11-15 18:53
- 更新:2022-11-15 18:53
- 阅读:198
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.6.4
第三方开发者工具版本号: 1.06.2209190
基础库版本号: 最新的
项目创建方式: HBuilderX
示例代码:
操作步骤:
<!-- list-temp.vue -->
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
<slot :data="item"></slot>
</li>
</ul>
</template>
<script>
prop:['items']
</script>
<!-- main.vue -->
<template>
<list-temp v-slot="{data}">
{{data.creationTime|date}} <!-- undefined -->
{{ getStatus(data.status)}} <!-- 可能导致只显示一条数据-->
</list-temp>
</template>
<script>
method:{
getStatus(){
return '123';
}
}
</script>
<!-- list-temp.vue -->
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
<slot :data="item"></slot>
</li>
</ul>
</template>
<script>
prop:['items']
</script>
<!-- main.vue -->
<template>
<list-temp v-slot="{data}">
{{data.creationTime|date}} <!-- undefined -->
{{ getStatus(data.status)}} <!-- 可能导致只显示一条数据-->
</list-temp>
</template>
<script>
method:{
getStatus(){
return '123';
}
}
</script>
预期结果:
正常显示
正常显示
实际结果:
使用过滤器会造成当前值为undefined。同时使用过滤器和方法会导致只显示最后一条记录,但显示确是正常的
使用过滤器会造成当前值为undefined。同时使用过滤器和方法会导致只显示最后一条记录,但显示确是正常的
bug描述:
自定义了一个list组件,内部使用默认slot向外传递了循环的item元素,在父组件使用渲染数据时,不能使用过滤器和方法,这个怎么解决?
使用过滤器会造成当前值为undefined。同时使用过滤器和方法会导致只显示最后一条记录,但显示确是正常的
0 个回复