时间戳

首页 > 解决方案 > 另一个范围内的 AlpineJS select2 组件引发错误

jquery - 另一个范围内的 AlpineJS select2 组件引发错误

问题描述

我在刀片文件中有以下 AlpineJS 组件：

选择.blade.php

<div wire:ignore>

<div
    x-data="{value: @entangle($attributes->wire('model'))}"
    x-init="$nextTick(() => {
            select2 = $($refs.select).select2();
            select2.on('select2:select', (event) => {value = event.target.value});
            })">

    <select x-ref="select"
            x-bind:value="value"
        {{ $attributes->whereDoesntStartWith('wire:model') }}>

        {{$slot}}

    </select>

</div>

</div>

然后我把它放在一个 livewire 组件中，以 wire:model 为边界

<div>
  <x-backoffice.forms.select wire:model="perPage">
      <option value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
  </x-backoffice.forms.select>
</div>

这在页面上有几个 select2 组件可以正常工作，但是如果我将组件包装在另一个 x-data 范围内，我会从 JQuery 收到以下错误：

在此处输入图像描述

我需要包装它，因为我必须将 select2 放在模式对话框中，并且我用 alpine 控制可见性。该组件工作正常，但我更愿意避免该消息并知道为什么会发生这种情况。

JQuery 版本是 3.5.1（也尝试使用 2.2.4），select2 是 4.0.13

标签： jquerylaravellaravel-livewirealpine.js

解决方案

好吧，由于某种原因，如果我发送选择器 ID 而不是 $ref，错误就会消失。

改变了

$($refs.select).select2();

和

$('#id').select2();

然后我通过道具传递 ID。

推荐阅读