这可以在没有 Alpine Js 的情况下转换为 Livewire 组件或简化为 livewire 组件（标签输入）

Question

我想为标签输入制作一个 Laravel livewire 组件。我在互联网上找到了一个，但很难连接到 livewire 组件。这是产品属性添加页面。我添加了不同的属性和值。所以我尝试使用 Shopify 网站等标签输入。此代码是否可以在没有 alpine js 的情况下转换为 livewire 组件，或者是否可以简化 alpine js 部分以与 livewire 组件兼容？

enter image description here

    <div class="relative" @keydown.enter.prevent="addTag(textInput)">
        <input x-model="textInput" x-ref="textInput" @input="search($event.target.value)" class="form-control"
            placeholder="Enter some tags">

        <div :class="[open ? 'block' : 'hidden']">
            <div class="absolute left-0 z-40 w-full mt-2">
                <div class="py-1 text-sm bg-white border border-gray-300 rounded shadow-lg">
                    <a @click.prevent="addTag(textInput)"
                        class="block px-5 py-1 cursor-pointer hover:bg-indigo-600 hover:text-white">Add
                        tag "<span class="font-semibold" x-text="textInput"></span>"</a>
                </div>
            </div>
        </div>

        <template x-for="(tag, index) in tags">
            <div class="inline-flex items-center mt-2 mr-1 text-sm bg-indigo-100 rounded">
                <span class="max-w-xs ml-2 mr-1 leading-relaxed truncate" x-text="tag"></span>
                <button @click.prevent="removeTag(index)"
                    class="inline-block w-6 h-8 text-gray-500 align-middle hover:text-gray-600 focus:outline-none">
                    <svg class="w-6 h-6 mx-auto fill-current" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24">
                        <path fill-rule="evenodd"
                            d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z" />
                    </svg>
                </button>
            </div>
        </template>
    </div> 

<script>
    function tagSelect() {
        return {
            open: false,
            textInput: '',
            tags: [],
            init() {
                this.tags = JSON.parse(this.$el.parentNode.getAttribute('data-tags'));
            },
            addTag(tag) {
                tag = tag.trim()
                if (tag != "" && !this.hasTag(tag)) {
                    this.tags.push(tag)
                }
                this.clearSearch()
                this.$refs.textInput.focus()
                this.fireTagsUpdateEvent()
            },
            fireTagsUpdateEvent() {
                this.$el.dispatchEvent(new CustomEvent('tags-update', {
                    detail: {
                        tags: this.tags
                    },
                    bubbles: true,
                }));
            },
            hasTag(tag) {
                var tag = this.tags.find(e => {
                    return e.toLowerCase() === tag.toLowerCase()
                })
                return tag != undefined
            },
            removeTag(index) {
                this.tags.splice(index, 1)
                this.fireTagsUpdateEvent()
            },
            search(q) {
                if (q.includes(",")) {
                    q.split(",").forEach(function(val) {
                        this.addTag(val)
                    }, this)
                }
                this.toggleSearch()
            },
            clearSearch() {
                this.textInput = ''
                this.toggleSearch()
            },
            toggleSearch() {
                this.open = this.textInput != ''
            }
        }
    }
</script>

Answer 1

我无法完全按照我的意愿转换上面的代码。但我可以使用 livewire laravel 组件制作一个标签输入系统。我觉得这段代码可能会帮助某人使用 livewire Laravel 进行标签输入。

//Livewire组件(app/Http/Livewire/)

    public $attributeOne = [];
    public $attributeOneTag;
    public $attributeOneTags = [];
    public $attributeOneTagsMerge = [];
    public $attributeOneId;

public function attributeOne()
    {
        $attributeOneTag = trim(str_replace(' ', '', $this->attributeOneTag));

        if (in_array($this->attributeOneTag, $this->attributeOneTags) || $this->attributeOneTag === '') {
            $this->attributeOneTag = '';
            $this->attributeOneId = 'attributeOneId';
            $this->emit('tagfocus');
        } else {
            array_push($this->attributeOneTags, $attributeOneTag);
            $this->attributeOne = array_merge($this->attributeOneTagsMerge, array($this->attributeOneTags));
            $this->attributeOneTag = '';
            $this->attributeOneId = 'attributeOneId';
            $this->emit('tagfocus');
        }
    }

//livewire视图组件（resources/views/Livewire/）

<x-input.select wire:model='attributeOneTag' wire:keydown.enter='attributeOne'  :attribute="$attributeOne" :attributeId="$attributeOneId"/>

//Laravel 组件(resources/views/components/input/select.blade.php)

@props([
    'error' => null,
    'attribute' => null,
    'attributeId' => null,
])

<input type="text" id="{{ $attributeId }}" class="form-control" {{ $attributes }}>

@isset($attribute)
    @foreach ($attribute as $item)
        @foreach ($item as $key => $value)
            <div class="inline-flex items-center mt-2 mr-1 text-sm bg-indigo-100 rounded">
                <span class="max-w-xs ml-2 mr-1 leading-relaxed truncate">{{ $value }}</span>
                <button wire:click.prevent='remove({{ $key }})'
                    class="inline-block w-6 h-8 text-gray-500 align-middle hover:text-gray-600 focus:outline-none">
                    <svg class="w-6 h-6 mx-auto fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill-rule="evenodd"
                            d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z" />
                    </svg>
                </button>
            </div>
        @endforeach
    @endforeach
@endisset
 
<script>
    document.addEventListener('livewire:load', () => {
        window.livewire.on('tagfocus', inputname => {
            document.getElementById("{{ $attributeId }}").focus();
        })
    });
</script>