The scope in alpinejs 3

[lyquocphong]

Hi !

I would like to ask that in alpinejs3, the child is able to access the parent data when we use it with directive how we can use it if the parent data is not set. Example

<template x-if="orderNumber === null && this.offerEnabled">....</div>

The offerEnabled may come from parent or not so I need to use this.offerEnabled there, because when offerEnabled is not appear in parent, there will be error that offerEnabled is not defined, so how we can solve this problem or using this.offerEnabled is the right solution

[ekwoka]

This seems like a case where it should not be possible for it to not exist.

The wrapping components should all provide a value for it if they want this component inside of them.

If they must maybe not have it,

you should use a getter on the child, maybe like

get showOffer () {
  return this.orderNumber === null && this.offerEnabled
}

or use the $data magic.

$data.offerEnabled

Because of how Alpine works, an item that is not defined in any containing scope is just like trying to reference a variable that doesn't exist at all, which is an error. It is not like accessing a property on an object.