Alpine Consumer

Alpine provide the most flexable consumer.

When using Alpine consumer, remember to add x-data attribute to the parent node.

Only existance of x-data will trigger the Alpine consumer.

As a convention only change the data field of the data context.

Show response body here.

<ul
  ph-data-consumer="alpine:data"
  x-data="{data: [{name: 'a', id : 1}]}"
  id="data-consumer-1">
  <template x-for="it in data">
    <li x-text="`${it.name}(${it.id})`"></li>
  </template>
</ul>
<button
  type="button"
  name="button"
  class="btn"
  ph-ajax="/fixtures/data-consumer"
  ph-target="#data-consumer-1">
  Query
</button>

Parameters

ph-data-consumer="alpine:data" The data after the alpine is the path to the data.

In this example, the server response:

{
  "data": [
    { "id": 1, "name": "A" },
    { "id": 2, "name": "B" },
    { "id": 3, "name": "C" }
  ]
}

So the data in the x-data context of the Alpine will be assign the new value:

[
  { "id": 1, "name": "A" },
  { "id": 2, "name": "B" },
  { "id": 3, "name": "C" }
]

The reactive nature of the Apline will update the UI