My current component is designed to display two different datasets, each with their own unique nature of data:
state.articleTypeList: string[]
state.renderPriceClassNameList: {[key: string]: string[]}
To render both datasets within a single v-for component, I am utilizing ternary operators:
<div
v-for="(rootItem, key) in openTab === 1
? state.articleTypeList
: state.renderPriceClassNameList"
:key="key">
<div
@click="
openTab === 1 ? getArticleList(rootItem) : getPriceClass(rootItem)
"
...
In typescript, an error is displayed for rootItem, indicating:
Argument of type 'string | string[]' is not assignable to parameter of type 'string'openTab !== 1.
Despite my search efforts, I have not found a solution to this error apart from encountering this git issue which offers no resolution. One possible alternative could involve separating the rendering of each dataset into its own v-for loop rather than using ternary operators, but this would require a significant overhaul of the entire component.
Is there a viable approach to address this challenge?