Seems like a simple mistake, but here's what happened:
In the main parent component, I have an array defined:
...
<object-list-grid
v-bind:objects="objectsList"
></object-list-grid>
...
data() {
return {
...
objectsList: [],
...
};
I pass this array down to a child component (through another intermediary child) as objects:
In the middle child component (object-list-grid):
<object-list
:objects="objects"
></object-list>
...
props: ["objects"],
And finally in the last child component:
props: ["objects"],
I am trying to create a subset of this array but I seem to be failing. I attempted to do this within the created() lifecycle hook of the last child component; however, the log outputs results that are confusing:
console.log(this.objects);
console.log(this.objects.length);
console.log(this.objects.slice());
This code produces the following result:
https://i.sstatic.net/M1ycR.png
I noticed that in the log, it shows as an ob object instead of an Array. After researching similar issues, my understanding is that this behavior is normal in Vue. Additionally, it appears that the array has 17 elements.
If anyone can offer assistance or explanation, it would be greatly appreciated.