[QUESTION] Passing down props

[go4cas]

Here's an extract of a component template:

<div x-text="$prop('counts').counters.open"></div>
<core-ticket-counter
  type="open"
  :value="$prop('counts').counters.open"
  warning="true"
></core-ticket-counter>

The normal <div> element displays the correct value. The <core-ticket-counter> component throws "Alpine Expression Error: Cannot read properties of undefined (reading 'counters')" error.

Is this the correct way of passing down props to embedded components?

[xinjie-zhang]

When you use $prop, it will find the closest wrapper component and get property. For <div> $prop will get the wrapper component property. While core-ticket-counter itself is a component, it will read its own 'counts' property. It does not exist. If you want to read wrapper component's property, try :value="$api.$of('parent').$prop('counts')..."

[go4cas]

Thanks worked! Thanks, @xinjie-zhang!