自己做的网站访问不,酒店网页设计素材,旅游商务网站建设,福州做网站建设mint-ui Picker 显示异常
现象
最近一个老项目页面显示异常#xff0c;使用mint-ui Picker显示异常,直接显示成了 数据对象#xff0c;而不是具体travelName 字段
组件
mint-ui Picker
使用方式(vue方式) // template
mt-picker :slotsslots value-key…mint-ui Picker 显示异常
现象
最近一个老项目页面显示异常使用mint-ui Picker显示异常,直接显示成了 数据对象而不是具体travelName 字段
组件
mint-ui Picker
使用方式(vue方式) // template
mt-picker :slotsslots value-keyname :itemHeight40 :visibleItemCount3
/mt-picker// js
data(){return {slots: [{flex: 1,values: [{travelNo: ,travelName: ,travelId: 1,}],className: slot1,textAlign: center,defaultIndex: 0,valueIndex: 0}]}
}导致错误原因
Picker 组件 value-key 为 travelName,
slots 字段中 travelName 字段为空导致渲染直接渲染了这一条数据
{travelNo: ,travelName: ,travelId: 1,
}我们来看看 picker-slot 源码是怎么渲染的
具体渲染如下
先判断当前 itemValue 是否为对象是对象 ,使用 itemValue[valueKey],且字段有值 并且不为数字0则渲染 itemValue[valueKey]否则为 渲染 itemValuevalueKey即为传入的travelName不是对象 直接使用 itemValue {{ typeof itemValue object itemValue[valueKey] ? itemValue[valueKey] : itemValue }}【注】picker-slot 源码
templatediv classpicker-slot :classclassNames :styleflexStylediv v-if!divider refwrapper classpicker-slot-wrapper :class{ dragging: dragging } :style{ height: contentHeight px }div classpicker-item v-foritemValue in mutatingValues :class{ picker-selected: itemValue currentValue } :style{ height: itemHeight px, lineHeight: itemHeight px }{{ typeof itemValue object itemValue[valueKey] ? itemValue[valueKey] : itemValue }}/div/divdiv v-ifdivider{{ content }}/div/div
/template
