Vuetify: Setting weekdays property in v-calendar makes browser freeze

Created on 26 Sep 2019  路  7Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.0.19
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Mac OS 10.14.6

Steps to reproduce

Using the last example on the calendar documentation page and only adding :weekdays="[1, 2, 3, 4, 5, 6, 0]" (as documented) to get a Monday to Sunday (European) view. Now if you select the week view the browser hangs and must be force quit/killed.

Expected Behavior

The calendar should show a full week starting with Monday and ending with Sunday.

Actual Behavior

The type menu stays open and browser hangs and fans spinning up. Tested in Chrome and Firefox.

Reproduction Link

https://codepen.io/goeh/pen/WNeWxpG?&editable=true&editors=101

VCalendar bug

Most helpful comment

If I create a data property weekdays: [1, 2, 3, 4, 5, 6, 0] and use that in :weekdays="weekdays" everything works as expected.
Is adding the array directly into the attribute invalid? In such case we can close this issue.

All 7 comments

After some more testing I realized that whatever I set weekdays to, the browser goes into a loop.
I tested :weekdays="[0, 1, 2, 3, 4, 5, 6]"and :weekdays="[0, 1, 2, 3, 4]". Same problem.

If I create a data property weekdays: [1, 2, 3, 4, 5, 6, 0] and use that in :weekdays="weekdays" everything works as expected.
Is adding the array directly into the attribute invalid? In such case we can close this issue.

It's emitting change when weekdays changes, which updates start and end, which causes a re-render, which makes weekdays a new array, which causes it to emit change...

@KaelWD do you recall having this issue anywhere else in the project and how it was dealt with? I haven't ran into this problem before since I think it's tied to us using the render function (or I'm mistaken)

I'm still seeing this after updating to latest version of [email protected].
I have weekdays prop as :weekdays="weekView" and in weekView: (this.weekdays) ? this.weekdays.split('.') : [1, 2, 3, 4, 5, 6, 0] in data object.

Works fine as long as I click previous / next month button when browser freezes and has to be forced to close.

/// edit.

Forget previous.
After setting the weekdays prop to array and leaving the string splitting to parent component all works fine. Split also provided array of strings which worked but could of caused the prev / next issue.

Hi, I still have this problem in the latest version of vuetify (2.3.15), are there any workarounds for this?

IIRC it's not a supported use of a vue prop. Don't bind an array constant to a prop. This prop accepts a comma delimited string if you want to pass a constant. Otherwise pass it a computed/data value.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Dev-Oli picture Dev-Oli  路  33Comments

DeepDiver1975 picture DeepDiver1975  路  32Comments

MatthewAry picture MatthewAry  路  33Comments

CasperLaiTW picture CasperLaiTW  路  30Comments

noorzaie picture noorzaie  路  38Comments