更好的解决方案,而不是$wire.set来传递livewire的计算Alpine值



我是Alpine/Livewire的新手。这个标记脚本运行良好,除了一件事:表单正在向服务器连续发送查询。有更好的方式来传递livewire的表单数据吗?

<div class="col-span-6 my-2" x-data="{tags: [], newTag: ''}" >
<x-jet-input id="tags"
type="text"
wire:model="tags"
:value="$wire.set('tags','JSON.stringify(tags)')"
class="mt-1 block w-full hidden"
/>
<div class=" w-full mx-auto ">
<div class="tags-input border-gray-300 shadow-sm  focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
<template x-for="tag in tags" :key="tag">
<span class="tags-input-tag">
<span x-text="tag"></span>
<button type="button" class="tags-input-remove" @click="tags = tags.filter(i => i !== tag)">
&times;
</button>
</span>
</template>
<input class="tags-input-text w-full" placeholder="{{__('Add music tags eg.') }} Pop Trap Live..."
@keydown.enter.prevent="if (newTag.trim() !== '') tags.push(newTag.trim()); newTag = ''"
@keydown.space.prevent="if (newTag.trim() !== '') tags.push(newTag.trim()); newTag = ''"
@keydown.backspace="if (newTag.trim() === '') tags.pop()"
x-model="newTag"
/>
</div>
<x-jet-input-error for="tags" class="mt-2" />
<x-slot name="actions">
<x-jet-action-message class="mr-3" on="saved">
{{ __('Saved.') }}
</x-jet-action-message>
<x-jet-button
>
{{ __('Save') }}
</x-jet-button>
</x-slot>

对于所有有$wire.set问题的人:我找到了解决方案,但没有在文档中。$wire.set需要第三个参数true才能跳过watch函数,如果不需要,它不会在后台发送数据$wire.set('param','value',true(

最新更新