Variable Scope issue with nested v-for loops

Very new to Vue, it is my first front end project and my first framework. Vue has made quick work of my project but I ran into the first problem that I can’t seem to resolve through a Google Search.

I have a nested object along the lines of the following.

myObjects = [
   {
        type: "type1",
       properties: {
              origin: "somewhere",
              filters: [
                 {
                       field: "field1",
                       value: "value1"
                 }
              ]
        }
   }
]

and a nested for loop along the lines of

<div v-for="object in myObjects">
     object type = {{ object.type }}
     origin = {{ object.properties.origin }}
     <div v-for="filter in object.properties.filters">
           {{ filter.field }} is visible but {{ object.properties.origin }} is not
     </div>
</div>

The object.properties.origin field in the outer loop is not visible within the inner, presumably because of a scope issue. Is there anything relatively simply / straightforward that I can do to resolve this or does it require me to somehow nest a component within a component (I’m using but not designing components just yet)?

Thanks very much in advance for any assistance.
Regards,

ps.

Should work fine: https://jsfiddle.net/jamesbrndwgn/kxcgwqf4

There must be something more to your code than provided here.

Hi, maybe your object is loaded asynchronously, so you have to wait for a response before you can display it.

Thanks everyone for your input.

James, you are correct, in my haste to post something I seem to have over simplified my situation a little too much. Through the process of elaborating I realized the source of my mistake. Long story short, I’m using a component (vue-treeselect) which calls a javascript function to load data dynamically - it is actually there that I need to access the element in question and where it was saying that it does not exist. Within the second loop I have something along the lines of the following;

<treeselect .... :load-options=({ object, parentNode, callback, instanceId }) => myFunction(object.properties.origin, callback) ... >

Which might actually make more sense (to those familiar with Treeselect or possibly more generally) had I not change action to object in my example…

Nonetheless, it was only through the process of explaining things that the problem jumped out at me - that I had inadvertently used action as a variable twice without noticing.

Thanks very much for taking to time to help me think through this, I hope this posting isn’t too much of a distraction to others.

Thanks again,

ps.

1 Like