The code I am currently using is producing the following errors in the console output:
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
[Vue warn]: Invalid prop: type check failed for prop "eventKey". Expected String, Number, got Array
<a-select
option-filter-prop="children"
>
<a-select-option
v-for="(item, i) in branch"
:key="i"
:value="item.branches"
>
<span>{{ item.title }}</span>
</a-select-option>
</a-select></a-col
>
</a-row>
I have also attempted: :key="${++i}-${branch}"
But the warning still persists
In the same file, I iterate over the same array for a different purpose. It shouldn't be causing an issue, right?
<Collapse v-for="(item, index) in branch" :key="++index">
<a-collapse-panel :header="item.title">
<Collapse v-for="(foo, inde) in item.branches" :key="inde">
<a-collapse-panel :header="foo.title">
<a-row>
<a-col>
<p>{{ foo.title }}</p>
</a-col>
<a-col>
<p>Hello world</p>
</a-col>
</a-row>
</a-collapse-panel>
</Collapse>
</a-collapse-panel>
</Collapse>
Quick note: The error message appears 15 times, which matches the number of objects I have in branches
Content of branch:
"region": [
{
"title": "xxxxxx",
"branches": [
{
"title": "xxxxx",
"description": "xxxxxxx",
"link": "xxxxxxxxxxxxxx"
}
]
},
]