php artisan event:generate

wire:model="message"

Properties

public Post $post;

Livewire attempts to mimic this behavior through its mount method

Rendering Components

As you can see, x-id accepts an array of ID names. Now any usages of $id() within that scope, will all use the same ID. Think of them as "id groups".

Example:

Because of this difference in behavior, x-if should not be applied directly to the element, but instead to a <template> tag that encloses the element. This way, Alpine can keep a record of the element once it's removed from the page.

<template x-teleport="body" @click="open = false"> <div x-show="open"> Modal contents... (click to close) </div> </template>

addresses this scenario

<div x-data="{ label: 'Hello' }" x-effect="console.log(label)"> <button @click="label += ' World!'">Change Message</button></div>

.lazy

x-model

<div @scroll.window.throttle="handleScroll">...</div>

debounce

<div x-data @foo="alert('Button Was Clicked!')"> <button @click="$dispatch('foo')">...</button></div>

x-on

<div :class="{ 'hidden': ! show }">

<div x-data="{ placeholder: 'Type here...' }"> <input type="text" x-bind:placeholder="placeholder"></div>

processed

Re-usable Data

<div x-show="isOpen">

JavaScript getters are handy when the sole purpose of a method is to return data based on other state.

Sometimes you may want to access the native browser event object inside your own code. To make this easy, Alpine automatically injects an $event magic variable:

<button x-data="{ label: 'Click Here' }" x-text="label"></button>

more fine-grained control over the transitions

x-if

:class="{ 'hidden': ! open }"