Блог

У меня есть компонент Livewire с кнопкой, и я хочу добавить форму (то есть другой компонент livewire), нажав на эту кнопку. Например, мы делаем это с помощью ajax, запрашивая серверную часть для загрузки HTML и добавления с помощью jQuery. Итак, вопрос в том, можем ли мы сделать то же самое с Livewire?

 <div>
    <button wire:click="loadFormComponent">Add a Link</button>
    <div>
        here I want to append the result of `loadFormComponent`
    </div>
</div>
 

ниже приведен компонент формы

 <div>
    <form wire:submit.prevent="addLink">
        <div>
            <input type="URL" wire:model="URL" placeholder="https://example.com">
            <button type="submit">Save Link</button>
        </div>
    </form>
</div>
 

Да, вы можете отображать части вашего лезвия, включая другие компоненты Livewire, при определенных условиях. Для этого вам не нужен AJAX. Вы делаете раздел вашего блейд-файла условным:

 <div>
    <button wire:click="$set('showFormComponent', true)">Add a Link</button>
    @if ($showFormComponent)
    <div>
        here I want to append the result of `loadFormComponent`
    </div>
    @endif
</div>
 

и в вашем компоненте livewire вам нужно добавить:

 public $showFormComponent;
 

По щелчку мыши переменная $showFormComponent будет установлена в true значение, и представление будет повторно отображено, включая компонент.