I am dealing with a types variable that holds an array of objects, each containing two properties: name and content.
In the content property, there is another array of objects with only one property: name.
Upon template display using {{types}}, I am seeing the following structure:
[ { "name": "Base", "content": [... ] },
{ "name": "Kilned", "content": [... ] },
{ "name": "Stewed", "content": [... ] },
{ "name": "Roasted/Torrefied", "content": [... ] },
{ "name": "Others", "content": [... ] } ]
Here is a snippet of my template:
<div class="h-3/4 overflow-auto">
<div v-for="(group,index) in types">
<FermentableTypeItem
@updateModel="updateModel"
:key="index"
:type_name="group.name"
:group_name="group.name"
:state="group.state"
></FermentableTypeItem>
{{group.content}}
<FermentableTypeItem
v-for="(t,index) in group.content"
@updateModel="updateModel"
:key="index"
:type_name="t.name"
:group_name="group.name"
></FermentableTypeItem>
</div>
</div>
I am trying to add a special [1] FermentableTypeItem for each top-level element, followed by looping through the content property of these elements to add a list of regular [2] FermentableTypeItems.
Note 1: Special refers to having identical group_name and type_name properties.
Note 2: Normal indicates differing group_name and type_name properties.
While the code seems to work in displaying the FermentableTypeItems, it crashes when the variable t is utilized within the second loop, displaying an error message that 't is undefined'. Can someone assist me in resolving this issue? Perhaps it's a simple fix, but I am unable to pinpoint the problem.