将 AlpineJS 定义的数据拉入 LiveWire 组件

Question

我在如何从 Alpine 中提取数据以在 LiveWire 中工作时遇到了一些问题。

代码示例

<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>

查看第 15 行 (wire:click="$emit('addToBasket', {{ $drip }})")。如何将滴水数据添加到 emit.现在我把它包装在 {{ }} 中（这是故意的）。我不知道如何调用它来发出。

你可以在这里看到它是如何运行的 https://codepen.io/bitvalentine/pen/wvJEYYX

Answer 1

您可以使用 livewire @entangle() 功能在 alpine 和 livewire 之间共享属性状态。

只需像下面这样定义您的高山 drip 属性并在您的 livewire 上设置它的值属性

<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>

在你的 livewire 组件上

public $drip = null;

将 AlpineJS 定义的数据拉入 LiveWire 组件

Pulling AlpineJS defined data into a LiveWire Component

javascript

laravel-livewire

alpine.js