Директива wire:model.fill

Директива wire:model.fill вешается на HTML-форму и используется для массового обновления свойств компонента на основе введённых данных. В отличие от wire:model, которая привязывает каждое поле индивидуально, wire:model.fill позволяет обновить сразу несколько свойств компонента за один раз. В значение директивы передаётся список имён свойств, которые нужно заполнить, либо можно использовать её без параметров для заполнения всех свойств, соответствующих именам полей ввода.

Синтаксис

<form wire:model.fill="['property1', 'property2']">
	<input type="text" name="property1" />
	<input type="text" name="property2" />
</form>

Если не передавать массив свойств, то будут заполнены все свойства, имена которых совпадают с атрибутами name полей ввода:

<form wire:model.fill>
	<input type="text" name="title" />
	<input type="text" name="content" />
</form>

Пример

Давайте создадим форму редактирования статьи, где поля ввода будут соответствовать свойствам компонента $title и $content. При отправке формы данные будут массово присвоены свойствам компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ArticleForm extends Component
	{
		public $title = 'Default title';
		public $content = 'Default content';
		
		public function save()
		{
			// Data is already filled via wire:model.fill
			// You can use $this->title and $this->content
		}
		
		public function render()
		{
			return view('livewire.article-form');
		}
	}
?>

<form wire:model.fill wire:submit.prevent="save">
	<input type="text" name="title" />
	<textarea name="content"></textarea>
	<button type="submit">Save</button>
</form>

<div>
	Title: {{ $title }}
</div>
<div>
	Content: {{ $content }}
</div>

Результат выполнения кода после отправки формы с заполненными полями:

<form>
	<input type="text" name="title" value="New Article" />
	<textarea name="content">Article content</textarea>
	<button type="submit">Save</button>
</form>

<div>
	Title: New Article
</div>
<div>
	Content: Article content
</div>

Пример

Давайте укажем конкретные свойства для заполнения. Это полезно, если в форме есть поля, которые не должны изменять свойства компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $name = 'Guest';
		public $email = 'guest@example.com';
		public $role = 'user';
		
		public function updateProfile()
		{
			// Only name and email will be updated
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<form wire:model.fill="['name', 'email']" wire:submit.prevent="updateProfile">
	<input type="text" name="name" />
	<input type="email" name="email" />
	<input type="text" name="role" disabled />
	<button type="submit">Update</button>
</form>

<div>
	Name: {{ $name }}
</div>
<div>
	Email: {{ $email }}
</div>
<div>
	Role: {{ $role }}
</div>

В этом примере свойство $role не будет изменено, так как оно не указано в массиве для заполнения, даже если поле ввода с таким именем присутствует в форме.

Результат выполнения кода после отправки формы с заполненными полями:

<form>
	<input type="text" name="name" value="John Doe" />
	<input type="email" name="email" value="john@example.com" />
	<input type="text" name="role" disabled value="admin" />
	<button type="submit">Update</button>
</form>

<div>
	Name: John Doe
</div>
<div>
	Email: john@example.com
</div>
<div>
	Role: user
</div>

Смотрите также

директиву wire:model,
которая привязывает отдельное поле ввода к свойству компонента
директиву wire:submit,
которая вызывает метод при отправке формы
директиву wire:submit.prevent,
которая отменяет стандартную отправку формы и вызывает метод
директиву wire:model.number,
которая преобразует значение поля в число