vuetify
vuetify copied to clipboard
[Bug Report][2.6.9] `VData` creates undesirable behavior if the options prop is not set correctly
Environment
Vuetify Version: 2.6.9 Vue Version: 2.7.8 Browsers: Chrome 104.0.0.0 OS: Mac OS 10.15.7
Steps to reproduce
- Open CodePen.
- Examine output at the bottom of the table.
- Observe
sortDesc: [ false ]
- Observe that no sort has been applied to the table.
- Apply a sort to one of the columns
- Observe that the
sortBy
andsortDesc
are not the same length and thatsortDesc
is too long. - Look at the code. Observe that we are not passing in a complete options object to start.
Expected Behavior
It is expected that VData
(which is being used by VDataTable
in this example) should produce a valid result if it needs to modify the contents of the options
prop to make it complete. The lengths of the sortBy
and sortDesc
arrays should always be the same.
Actual Behavior
By passing incomplete data into a component using VData
such as VDataTable
or VDataIterator
, VData
can 'initialize' the options
prop object incorrectly such that it contains invalid data. Once invalid data is in the options
prop object, it seems that the invalid data does not get cleared. From the beginning, sortDesc
will be created in the options
object with the value of [false]
while at the same time, the sortBy
array will be empty. These two arrays should always be the same length.
Reproduction Link
https://codepen.io/MatthewAry/pen/abYjmjx
Other comments
Workaround: Specify a value for sortDesc
. You can use the following:
options: {
page: 1,
itemsPerPage: 12,
sortDesc: []
}
And see https://vuetifyjs.com/en/components/data-iterators/#api-props for the object definition. You can also see the conversation about this issue here https://discord.com/channels/340160225338195969/351121729164410882/1006635099095302245