laravel - 如何使用livewire alpinejs Tom select动态添加多选？

Question

每个人。我在开发 laravel livewire alpinejs Tom-select / select2 的过程中遇到了一个问题。默认显示一行没有问题。

当我动态添加行数时，select无法正常显示和渲染。我应该怎么办？

这是我的代码：</p>

应用程序\http\livewire\编辑器

public $inputs = [0];
public $i = 1;

protected $listeners = [
    'add',
        'refresh'=> '$refresh'
    ];

public function add($i)
{
    $i = $i + 1;
    $this->i = $i;
    array_push($this->inputs ,$i);
    $this->emit('addFormRow');
}

public function remove($i)
{
    unset($this->inputs[$i]);
}

public function render()
{
    return view('livewire.editor');
}

livewire/editor.balde.php

@foreach ($inputs as $key => $value)
<tr>
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
        {{ $key + 1 }}
    </td>
    <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
        <select data-placeholder="Select your favorite actors" class="tom-select w-full">
            <option value="1" selected>Leonardo DiCaprio</option>
            <option value="2">Johnny Deep</option>
            <option value="3" selected>Robert Downey, Jr</option>
            <option value="4">Samuel L. Jackson</option>
            <option value="5">Morgan Freeman</option>
        </select>
    </td>
    <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-500">
        <select data-placeholder="Select your favorite actors" class="tom-select w-full" multiple>
            <option value="1" selected>Leonardo DiCaprio</option>
            <option value="2">Johnny Deep</option>
            <option value="3" selected>Robert Downey, Jr</option>
            <option value="4">Samuel L. Jackson</option>
            <option value="5">Morgan Freeman</option>
        </select>
    </td>
    <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-500">
        <button wire:click.prevent="remove({{ $key }})" type="button"
            class="inline-flex items-center p-1.5 border border-transparent rounded-full shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </td>
</tr>
@endforeach

like-tome-select.js

import TomSelect from "tom-select";
(function (cash) {
    "use strict";

    // Tom Select
    cash(".tom-select").each(function () {
        let options = {
            plugins: {
                dropdown_input: {},
            },
        };

        if (cash(this).data("placeholder")) {
            options.placeholder = cash(this).data("placeholder");
        }

        if (cash(this).attr("multiple") !== undefined) {
            options = {
                ...options,
                plugins: {
                    ...options.plugins,
                    remove_button: {
                        title: "Remove this item",
                    },
                },
                persist: false,
                create: true,
                onDelete: function (values) {
                    return confirm(
                        values.length > 1
                            ? "Are you sure you want to remove these " +
                            values.length +
                            " items?"
                            : 'Are you sure you want to remove "' +
                            values[0] +
                            '"?'
                    );
                },
            };
        }

        if (cash(this).data("header")) {
            options = {
                ...options,
                plugins: {
                    ...options.plugins,
                    dropdown_header: {
                        title: cash(this).data("header"),
                    },
                },
            };
        }

        new TomSelect(this, options);
    });
})(cash);

如果tom-select不能实现，可以用select2来实现吗？谢谢你。

标签： laravellaravel-livewirealpine.js