解决van-text-ellipsis异步数据渲染错误问题
在开发中遇到了一个问题记录一下。
·
在开发中遇到了一个问题记录一下
1. van-text-ellipsis组件
1.由于数据是异步请求的所以,当直接渲染值的时候会直接展示省略的文案。例如:
const getUserHome = async () => {
userHomeInfo.value = await getUserHomeInfo({ studentNo: studentNo.value });
userDataInfo.value[0].count = userHomeInfo.value.viewMeNumber;
};
效果:
设置的是当有2行的时候才会展示省略文案,现在直接展示省略文案没有渲染所需要的文字。
2.解决
加一个v-if,确保只有在 userHomeInfo?.intro
有值时才进行渲染。
<van-text-ellipsis
v-if="userHomeInfo?.intro"
:content="userHomeInfo.intro"
expand-text="展开"
class="w-full text-14rpx text-#2b3133"
rows="2"
/>
效果:
一行:
两行:

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐
所有评论(0)