8000 [Bug Report]datePicker组件不能正常使用 · Issue #389 · view-design/ViewUIPlus · GitHub
[go: up one dir, main page]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug Report]datePicker组件不能正常使用 #389

Open
se1120an opened this issue Sep 19, 2024 · 2 comments
Open

[Bug Report]datePicker组件不能正常使用 #389

se1120an opened this issue Sep 19, 2024 · 2 comments
Labels
Bug Something isn't working

Comments

@se1120an
Copy link

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，回出详细解决方案
@dosubot DosuBot
Copy link
dosubot bot commented Sep 19, 2024

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.

@dosubot dosubot bot added the Bug Something isn't working label Sep 19, 2024
@lex10000
Copy link

i had these error, when i used viewUiPlus in Nuxt3 with i18n Module. When i removed i18n module from Nuxt, error was disapepared.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@se1120an @lex10000
0