vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Bug Report][2.6.9] `VData` creates undesirable behavior if the options prop is not set correctly

Open MatthewAry opened this issue 2 years ago • 0 comments

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

  1. Open CodePen.
  2. Examine output at the bottom of the table.
  3. Observe sortDesc: [ false ]
  4. Observe that no sort has been applied to the table.
  5. Apply a sort to one of the columns
  6. Observe that the sortBy and sortDesc are not the same length and that sortDesc is too long.
  7. 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

MatthewAry avatar Aug 09 '22 20:08 MatthewAry