AlpineJS

alipne_twowaybinding.md

Two Way Binding

<!-- Example 1 -->
<div x-data="{ input : '' }" class="flex justify-center mt-8">
    <input type="text" x-model="input" class="p-2 border-2 rounded shadow">
    <h3 class="mt-2"> Output:</h3>
    <p x-text="input" class="bg-red-100"></p>
</div>

<!-- Example 2 -->
<div x-data="{ myInput : 'Write Something' }">
    <input type="text" x-model="myInput" class="p-2 border rounded shadow border-1">
    <input type="text" x-model="myInput" class="p-2 border rounded shadow border-1">
</div>

<!-- Example 3 -->
<div x-data="{ myColor:'' }" class="flex justify-center mt-8">
    <select x-model="myColor" class="p-2">
        <option value="" disabled>Select A Color</option>
        <option>Green</option>
        <option>Red</option>
        <option>Yellow</option>
    </select>
    Select Color: <p x-text="myColor"></p>
</div>

<!-- Input directives -->
x-model.lazy="myInput"
x-model.number="myInput"
x-model.debounce.1000ms="myInput"
x-model.throttle.500ms="myInput"

alpinejs_carousel.md

Carousel

<div class="flex flex-col" x-data="carousel()">
  <div>
    <img
      :src="`/assets/banners/${images[selected]}`"
      alt="banner">
  </div>
  <div class="items-center">
    <div class="flex space-4">
      <button
        class="pb-3 pi-4 bg-brand hover:bg-brand txt-gray-0 border-radius-2 shadow-2 font-large"
        @click="selected > 0 ? selected -= 1 : selected = images.length - 1">
          Prev
      </button>
      <button
        class="pb-3 pi-4 bg-brand hover:bg-brand txt-gray-0 border-radius-2 shadow-2 font-large"
        @click="selected < images.length - 1 ? selected += 1 : selected = 0">
          Next
      </button>
    </div>
  </div>
</div>

function carousel() {
  return {
    selected: 0,
    images: [
      "image1",
      "image2",
      "image3"
    ],
    init() {
      setTimeout(() => {
        this.selected < this.images.length - 1 ? this.selected += 1 : this.selected = 0
      }, 3000);
    }
  }
}

<template x-for="item in items">
      <h1 x-text="getItemTitle"></h1>
  </template>

this.$data.item.title