记uniapp总动态:style无法用带参数的computed属性问题
2024-01-09 15:28:44
问题描述:
v-for里面的组件呢,我要根据不同的item配置不同的style,于是有了这样的写法
<template>
<view class="weeks-item" v-for="(day,dayIndex) in item" :key="dayIndex">
<view :style="bgStyle(day)" >
{{ day. extraInfo.info}}
</view>
</view>
</template>
<script>
export default{
computed:{
bgStyle:function(){
return (day)=>{
if(day.extraInfo){
return `background-color:${day.extraInfo.data.bgColor}`
}else{
return ''
}
}
}}
}
</script>
然后一运行 ,就给报错
👉🏻 ? 解决办法:
<template>
<view class="uni-calendar__weeks-item"
v-for="(day,dayIndex) in styledItems(item)" :key="dayIndex">
<view class="daylayer-custom">
<view :style="day.dynamicStyle" >
{{ day. extraInfo.info}}
</view>
</view>
</view>
</template>
<script>
export default{
computed:{
styledItems:function(){
return (item)=>{
return item.map(day => ({
...day,
dynamicStyle: this.getDynamicStyle(day)
}));
}
}
},
methods: {
getDynamicStyle(day) {
if(day.extraInfo){
return `background-color:${day.extraInfo.data.bgColor}`
}
return ''
},
}
}
</script>
这样,就可以了,主要修改思路就是把style作为day元素的一个属性,然后动态style绑定这个属性即可。
小感悟:写代码不要太固执,打不过就加入,主打一个曲线救国。
文章来源:https://blog.csdn.net/domyself918/article/details/135425381
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!