uni-app v-for循环渲染带有slot的组件,数据绑定失败。
重现步骤
<template>
<view class="content">
<uni-card v-for="(item,index) in moduleList" :key="index" is-full="true" :title="item.title" :thumbnail="item.icon" extra="" >
{{item.strings}} <!--不能显示-->
{{strings}} <!--能显示-->
你好 <!--能显示-->
<rich-text :nodes="item.strings"></rich-text> <!--不能显示-->
</uni-card>
</view>
</template>
<script>
//引入Card卡片
import uniCard from "@dcloudio/uni-ui/lib/uni-card/uni-card.vue"
export default {
components: { //注册或获取全局组件
uniCard
},
data() {
return {
title: 'Hello',
moduleList: [
{
"title": "生活服务",
"strings":'<div style="text-align:center;"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/></div>',
"icon":""
}
],
strings: '<div style="text-align:center;"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/></div>'
}
},
onLoad() {
},
methods: {
}
}
</script>
详情见附件工程,可直接运行。
联系方式
[QQ] 2961238368