Open se1120an opened 1 week ago
I found a similar closed issue: [Bug Report] View UI Plus DatePicker 日期选择器 不显示,并浏览器报错. This issue was referenced by: [Bug Report]datePicker组件不能正常使用, which was last updated on September 19, 2024.
To resolve the TypeError "Cannot read properties of null (reading 'slice')" in the datePicker component, ensure that the internalValue
is properly initialized and handled. The error likely occurs because internalValue
is null
or not properly set when the slice
method is called.
In the data
function, ensure that internalValue
is initialized correctly:
data () {
const isRange = this.type.includes('range');
const emptyArray = isRange ? [null, null] : [null];
const initialValue = isEmptyArray((isRange ? this.modelValue : [this.modelValue]) || []) ? emptyArray : this.parseDate(this.modelValue);
const focusedTime = initialValue.map(extractTime);
return {
prefixCls: prefixCls,
showClose: false,
visible: false,
internalValue: initialValue,
disableClickOutSide: false,
disableCloseUnderTransfer: false,
selectionMode: this.onSelectionModeChange(this.type),
forceInputRerender: 1,
isFocused: false,
focusedDate: initialValue[0] || this.startDate || new Date(),
focusedTime: {
column: 0,
picker: 0,
time: focusedTime,
active: false
},
internalFocus: false,
isValueNull: false,
timeSpinnerList: [],
panelTableList: []
};
}
Additionally, ensure that internalValue
is always an array before calling slice
on it. You can add a check in the publicVModelValue
computed property:
computed: {
publicVModelValue(){
if (this.multiple){
return Array.isArray(this.internalValue) ? this.internalValue.slice() : [];
} else {
const isRange = this.type.includes('range');
let val = this.internalValue.map(date => date instanceof Date ? new Date(date) : (date || ''));
if (this.type.match(/^time/)) val = val.map(this.formatDate);
return (isRange || this.multiple) ? val : val[0];
}
}
}
By ensuring internalValue
is properly initialized and checked, you can avoid the TypeError when calling slice
[1].
To continue talking to Dosu, mention @dosu.
Environment
谷歌浏览器允许的vue3项目
Reproduction link
https://www.iviewui.com/view-ui-plus/component/form/date-picker
Steps to reproduce
viewuiplus.min.js:44 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'slice')
What is expected?
能尽快解决
What is actually happening?
尽快解决bug,回出详细解决方案