Describe the bug
Getters in nested Alpine.js components throw TypeError when accessing properties from the same child object. The DevTools fails to evaluate getters that reference sibling properties using this.propertyName.
Device information:
OS: KDE Neon
Browser: Firefox 151.0.3
Extension version: Latest
Alpine.js version: 3.15.12
Code sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="parentComponent">
<div x-data="childComponent">
<p>Array length: {{ estadosCantidad }}</p>
</div>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('parentComponent', () => ({
parentValue: 'parent'
}));
Alpine.data('childComponent', () => ({
estados: ['a', 'b', 'c'],
get estadosCantidad() {
return this.estados.length; // Error: this.estados is undefined
}
}));
});
</script>
</body>
</html>To Reproduce
Save the HTML file and open it in browser
Open DevTools (F12)
Go to Alpine tab
Click on the nested child component in the tree
See error in console: TypeError: Cannot read properties of undefined (reading 'length')
Expected behavior
The DevTools should correctly evaluate the getter and display estadosCantidad: 3 without errors. The getter should be able to access this.estados from the same component object.
Additional context
The issue occurs specifically when a getter in a nested component tries to access properties from its own object (not from parent). Getters accessing parent properties work correctly.
Describe the bug
Getters in nested Alpine.js components throw TypeError when accessing properties from the same child object. The DevTools fails to evaluate getters that reference sibling properties using this.propertyName.
Device information:
OS: KDE Neon
Browser: Firefox 151.0.3
Extension version: Latest
Alpine.js version: 3.15.12
Code sample
To Reproduce
Save the HTML file and open it in browser
Open DevTools (F12)
Go to Alpine tab
Click on the nested child component in the tree
See error in console:
TypeError: Cannot read properties of undefined (reading 'length')Expected behavior
The DevTools should correctly evaluate the getter and display
estadosCantidad: 3without errors. The getter should be able to accessthis.estadosfrom the same component object.Additional context
The issue occurs specifically when a getter in a nested component tries to access properties from its own object (not from parent). Getters accessing parent properties work correctly.