-
-
Notifications
You must be signed in to change notification settings - Fork 696
Update no-side-effects-in-computed-properties.md #480
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.
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
Conversation
Provide more details on working with arrays inside computed properties.
Vue newbie here, It just took me a minute to figure out how the correct example compared to the incorrect one. Thought some clarification here could be helpful.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perfect! Thank you @SketchBookkeeper :)
infintesimal
commented
Sep 16, 2018
Hi all. Newbie here, I hope what i report is not a "problem exists between keyboard and chair." I encountered this eslint message while trying out some code where a user can both sort tabular data and provide form based input (checkboxes (for select, delete, update behaviors downstream)). I understand not mutating original arrays, but.....I also use events in vue to communicate from a child component (a data row) to the parent app that a checkbox has been changed. But....by not mutating the row level data in the child, I need to pass along positional data for which row has been checked. And here's the gotcha: when I use this.mydata.slice().sort(...) to sort the tabular data, when I try to update a row, the wrong row gets updated as the event handler for the checkbox being checked is acting on the original data rows and thee original data rows don't necessarily appear in the same order. So I feel stuck between a rock and a hard place. I can ignore the eslint warning b/c in the case of my app, it's not a side effect, it is the desired effect; or, I can try to please the linting gods and maybe pass a reference to the sorted array into the checkbox handler? Ultimately though, I need to send data back to my server that marks certain rows for various CRUD operations.
I could introduce a lot of complexity and used indexedDB and maintain a relational model between checked rows I suppose? Seems overkill though for the simple CRUD ops I am after.
Suggestions and criticisms of my code are welcome.
Here is a working fiddle that introduces the "side effect": http://jsfiddle.net/Loh5kyzt/10/
And here is the fiddle where I sort the slice() rather than the orginal data. http://jsfiddle.net/075ptnka/1/
Notice in the latter fiddle I place a comment on the line (line no. 65) that is in the check event handler that shows where/why my checkbox isn't sticking when I use slice.
At the end of the day, my "master" data does need to be correctly updated. What is the right way of going about it?
Thanks,
Steve
Provide more details on working with arrays inside computed properties.