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

【问题标题】：Pulling AlpineJS defined data into a LiveWire Component将 AlpineJS 定义的数据拉入 LiveWire 组件
【发布时间】：2021-08-28 06:02:57
【问题描述】：

我在如何从 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 }})"）。如何将滴水数据添加到发射器中。现在我把它包裹在一个 {{ }} （这是故意的）。我不知道怎么称呼它为发射。

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

【问题讨论】：

标签： javascript laravel-livewire alpine.js

【解决方案1】：

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

只需定义您的 alpine 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;

【讨论】：