Search code examples
javascriptlaravel-livewirealpine.js

Pulling AlpineJS defined data into a LiveWire Component

I'm having some issues with how to pull data from Alpine to work in LiveWire.

Code Example

<div x-data @click="$dispatch('popup', { name: 'Hello World', drip: 'yes' })" class="border-2 border-white flex font-semibold hover:bg-yellow-400 hover:border-yellow-200 items-center justify-center p-1.5 rounded-md shadow-sm text-base text-black transition-all md:w-8/12 lg:w-6/12 bg-green-300 cursor-pointer">Click Me</div>

<div x-data="{ popupinfo: false, drip: null }" x-on:popup.window="{ popupinfo = true }" @popup.window="{ name = $event.detail.name, drip = $event.detail.drip }" x-show="popupinfo" x-cloak>
  <h3 class="text-lg leading-6 font-bold text-gray-900" id="modal-title" x-text="name"></h3>
  <div class="flex items-center justify-start">
    <template x-if="drip == 'yes'">
      <div>True</div>
    </template>
    <template x-if="drip == 'no'">
      <div>False</div>
    </template>
  </div>

  <div class="bg-yellow-400 flex items-center justify-between px-3 py-2 rounded-xl my-2 cursor-pointer transition-colors tracking-tight" 
       wire:click="$emit('addToBasket', {{ $drip }})" 
       @click="$dispatch('addtobasket')">
    <div class="text-sm">
      <span class="font-bold">2 Uploads</span> a day
    </div>
    <div class="bg-white font-semibold px-2 py-1 rounded-md text-sm tracking-tighter"> Monthly</div>
    </div>
  </div>

Look on line 15 (wire:click="$emit('addToBasket', {{ $drip }})"). How can I add the drip data to the emit. Right now I've wrapped it in a {{ }} (Which is on purpose). I don't know how to call it for the emit.

You can see how it runs here https://codepen.io/bitvalentine/pen/wvJEYYX

Solution

  • You can use the livewire @entangle() feature to share property state between alpine and livewire.

    just define your alpine drip property like below and set its value on your livewire property

    <div x-data="{ popupinfo: false, @entangle('drip') }" x-on:popup.window="{ popupinfo = true }" @popup.window="{ name = $event.detail.name, drip = $event.detail.drip }" x-show="popupinfo" x-cloak>

    on your livewire component

    public $drip = null;