Can't access variable inside another.

[rexwebmedia]

this.countries is not working, how can I access the countries variable.
There is no error or warning in console.

Codepen: https://codepen.io/rexarvind/pen/xxagrWq

<section x-data="{
    countries: ['A', 'B', 'C'],
    work_address: {
        name: 'John',
         available_places: this.countries,      
    }
}">
  <ol>
    <template x-for="country in work_address.available_places">
      <li x-text="country"></li>
    </template>
  </ol>
</section>

[ekwoka]

Well, this is JS.

So when you do that, it's using the this that is the context of when the expression runs, which just means the expression itself as just a function.

[SimoTod]

You'll need something like

<section x-data="{
    countries: ['A', 'B', 'C'],
    get work_address() {
        return {
            name: 'John',
            available_places: this.countries,      
        }
   }
}">

as a separate note, the current scope in JS is always hard to grasp and source of bugs, I suppose this is an oversimplified example but it might be wise to find a different data structure