Let's envision a Vue.js application where the data structure stored in firebase looks something like this:
item: {
name: itemName,
childOne: {
subChildA: true,
subChildB: true
},
childTwo: {
subChildA: true,
subChildB: true
}
}
Now, we have a component that needs to display the length of the child nodes (which will be added later). Initially, I attempted to achieve this straightforwardly but encountered an issue:
<tbody>
<tr v-for="item in items" >
<td>
{{item.childOne.length - item.childTwo.length}}
</td>
</tr>
</tbody>
Therefore, I opted for another approach to calculate the lengths:
<tbody>
<tr v-for="item in items" >
<td>
{{Object.keys(item.childOne).length - Object.keys(item.childTwo).length}}
</td>
</tr>
</tbody>
Before the children are dynamically added through a Google Cloud Function, the initial data structure is simple as shown below:
item: {
name: itemName,
}
However, trying to implement this early stage results in an error message:
TypeError: Cannot convert undefined or null to object at Function.keys ()
The first strategy seems to render the component okay and handles the absence of children by displaying nothing, although it can't calculate the lengths. On the other hand, the second strategy successfully calculates the lengths when children are added, but fails to render without any data.
Is there a way to avoid this error and make the second strategy work even if the child nodes are not present yet?