开发者问题收集

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

2021-06-11
998

我在从 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 }})")。如何将 drip 数据添加到 emit。现在我已将其包装在 {{ }} 中(这是故意的)。我不知道如何为 emit 调用它。

您可以在此处查看其运行方式 https://codepen.io/bitvalentine/pen/wvJEYYX

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;
kenean50
2021-06-11