Using the parent variable after nested components

[keyurshah]

I'm have a component and then declaring nested components inside.

Once I use a data variable after a new nested component is declared, the variable doesn't work. Here's an example:

https://codepen.io/kjshah/pen/df81e5331e12140ac50ecb342dedfb61

<div x-data="values()">
  <div class="font-semibold">This Doesn't Work</div>
  
  <div x-data="{name: 'blue widget'}">
    Name: <span x-text='name'></span>
  </div>
  
  <hr>
  (total should show here)
  Total: <span x-text="total"></span>
</div>
  
--------------------------------------------------
  
<div x-data="values()">
  <div class="font-semibold">This Works</div>
  
  Total: <span x-text="total"></span>
  
  <div x-data="{name: 'blue widget'}">
    Name: <span x-text='name'></span>
  </div>
</div>

<script>
function values() {
  return {
    total: 1,
  }
}
</script>

[calebporzio]

Good catch, fixed in v0.4.3

[rosswintle]

Hi folks,

I've been playing with Alpine this evening for the first time and I THINK this is still an issue.

For starters, it's not documented whether referring to a variable in a parent scope is even possible, so I assumed it was. This should be made clear in the readme. It's entirely possible that referring to data declared higher up in the DOM is not allowed. It's also entirely possible that I just couldn't find where in the readme it tells me this.

If it is possible then it's still an issue as far as I can tell.

Example:

I have a collection of buttons and I want to apply a class to a button when that button is clicked.

Here's a simple example coded with button values hard-coded: https://codepen.io/magicroundabout/pen/jOEGXrd

This works and is fine. But I figured I could set the button ID as data on the button and use it in the directives, like this: https://codepen.io/magicroundabout/pen/KKwXbME

But in the second example here the button can't see either the data declared higher up in the DOM or its own data!

Here's a CodePen with both examples together: https://codepen.io/magicroundabout/pen/qBEPLqq

Is this a bug? Or a misunderstanding?