Cannot read properties of undefined using a getter accessing outer scope variable

[emavitta]

I'm trying to use a getter that have to access an outer scope variable (as seen in this pr #2128)
It seems to work fine but not with nested data. Unless i print the getter in the page with an x-text, i get an "undefined" error, like in this example

<div
      x-data="{ foo: 'bar', test:{ data:0 }
    }"
    >
      <div
        x-data="{
        get bob() {
            return this.test.data
        },

    }"
      >
        <button @click="console.log(bob)">alert</button>
      </div>
    </div>

The alert will print the correct number, but the console is giving me some error.

Using the getter for something that doesn't need to be printed but it has to be used later in the code doesn't work, like this example

<div
      x-data="{ foo: 'bar', test:{ data:0 }
    }"
    >
      <div
        x-data="{
          test:'',
        get bob() {
            return this.test.data
        },
        async fetchCall() {
          const response = await fetch('https://jsonplaceholder.typicode.com/todos/'+this.bob)
          const data = await response.json()
          this.test = data
        }
    }"
      >
        <div x-text="test"></div>
        <button @click="fetchCall">api call</button>
      </div>
    </div>
```

[ekwoka]

Well, the second one doesn't work because it has its own test prop defined.

The first is quite curious since that should work...

What if you remove the this? Since test is defined in the scope of that declaration already.

[SimoTod]

https://codepen.io/SimoTod/pen/vYrpqgw?editors=1111 it seems to work.
Which version of Alpine are you using? What is that backend.js reference in the error?

[SimoTod]

I'll have a look tomorrow. It might be something to do with watch

[ekwoka]

The issue here is that you are only putting into the appItems array that single data context, not the whole datastack.

If you change it to Alpine.$data(el) you would get the merged data stack.

this sandbox demonstrates this

You shouldn't be pushing the context into the parent like that though...

[yabdab]

@ekwoka "You shouldn't be pushing the context into the parent like that though..."

Why is that?

This is a drag and drop app that allows the enduser to add "items" to the app by dropping them in. Would you do it differently? Maybe put the items in a store instead?

Also, I like that Alpine playground. How can I register for that?

[ekwoka]

You'd do it by having the parent directly process the thing be added and Inject it from there.

[yabdab]

Are you saying that the parent should inject the markup for the items itself dynamically?

This solution won't allow for that unfortunately. Imagine this is a web page design app and the items ned to be laid out a certain way.

I am just worried why I should not be pushing into the parent is a bad thing? #learning

[emavitta]

@ekwoka , you're right about the props... it works properly as intended. I'm having a hard time replicating the error in a simple way, cause i'm implementing it n some php backend. I'll try to do it in a better way, still i had to do some bad hack like

init(){
this.local=this.parent
}
get getterAction(){
return this.local.....
}

otherwise it doesn't work. Also it seems that on stackblitz and similar i cannot see the error, while it appears locally.
@SimoTod thanks for noticing, cause i didn't pay enough attention... it's from the alpine devtools. Maybe it's just an error from the dev tools but the code itself may work...

[emavitta]

yep it seems that the error is fired only when the Alpine devtools is on, otherwise i got no error. Still it doesn't seems to work. I'll try to replicate the structure and see what's happening.

[emavitta]

Aaaaaaaaaaand i correct myself again.... it works as intended, simply the devtools gave me an error and i got stuck with it, cause i could not understand what was happening. So it's a devtools problem.
I know in vue sometimes values in the devtools doens't update because vue it's lazy (see FAQ), and maybe it's the same error.

[SimoTod]

The alpine devtools repo hasn't been updated in a while (21st Sept 2021, before the PR you mentioned). There are probably a lot of things that aren't supported.

[emavitta]

I can confirm is a devtools bug.
Her's my full example; it works as intended but once you open the devtools it gave me an error.
Thanks again for the support.