Docs: Clarify if we can call methods within a computed prop.
Purpose:
- To better document edge cases where it may be 'ok', but not preferred to invoke a method within a computed prop.
- To better document how
observables
work in vue.
Edge Case:
We had a try/catch in a computed prop because a user was passing in a list of Objects to be rendered. We were filtering on a property
on each object. If the key didn't exist, an exception would be thrown. The filterKey
was a prop. The keys are dynamic and determined at runtime depending on how the user uses the component.
We wanted to gracefully disable search, and print a console.warn. Because we can't mutate state in a computed prop, we moved the this.filterEnabled = false;
statement into a method.
Computed Prop:
filteredList() {
return this.computeFilteredList();
},
Method:
computeFilteredList() {
/*
At runtime, if an invalid search key is provided for any object in the array,
we gracefully disable search.
*/
try {
return this.list.filter(listItem =>
listItem[this.filterKey].toLowerCase().includes(this.queryStr.toLowerCase())
);
} catch (err) {
this.filterEnabled = false;
console.warn(
'Paginated List: Search was disabled due to an object in the array missing a valid filterKey'
);
return this.list;
}
},
Edited by 🤖 GitLab Bot 🤖