Как в livewire alpine js назначить данные из x-data? - PullRequest
Новая
       38

Как в livewire alpine js назначить данные из x-data?

0 голосов
/ 05 августа 2020

В laravel 7 / livewire 1.3 / turbolinks: 5.2 / alpine@v2 app У меня есть редактор crud как компонент с определенной формой $ 

class AppNews extends Component
{
    use WithPagination;
    use WithFileUploads;

    public $form = [
        'title'           => '1',
        'slug'            => '',
        'content'         => '2',
        'content_shortly' => '3',

и редактор с определенным inpoyt: 

<form class="form-editor" @if($updateMode=='edit')  wire:submit.prevent="update" @else  wire:submit.prevent="store" @endif >
            <div class="card">
                <div class="card-body card-block">                                    
                    
                    <dl class="block_2columns_md m-3"> <!-- title FIELD DEFINITION -->
                        <dt class="key_values_rows_label_13">
                            <label class="col-form-label" for="title">Title:</label>
                        </dt>
                        <dd class="key_values_rows_value_13">
                            <input
                                wire:model.lazy="form.title"
                                id="title"
                                class="form-control editable_field"
                                placeholder="Enter descriptive title"
                                autocomplete=off
                            >
                            @error('form.title')
                            <div class="validation_error">{{ clearValidationError($message,['form.'=>'']) }}</div> @enderror
                        </dd>
                    </dl> <!-- <dt class="block_2columns_md m-0"> title FIELD DEFINITION -->

, и это работает для меня, за исключением того, что в консоли я вижу много дополнительных запросов, например 

http://127.0.0.1:8084/livewire/message/admin.app-news

, когда я изменяю некоторые поля формы, я пытаюсь избавиться от этого с помощью alpine JS и в документах я вижу метод отправки и пытаюсь определить его: 

<dl class="block_2columns_md m-3"> 
    <dt class="key_values_rows_label_13">
        <label class="col-form-label" for="title">Title:</label>
    </dt>
    <dd class="key_values_rows_value_13" wire:model="form.title" x-data="{ title: ''}">
        <input
            x-model="search"
            id="title"
            class="form-control editable_field"
            placeholder="Enter descriptive title"
            autocomplete=off
        >
        @error('form.title')
        <div class="validation_error">{{ clearValidationError($message,['form.'=>'']) }}</div> @enderror
    </dd>
</dl>

Но как я могу в событии, когда поле редактируется (фокус изменен), чтобы установить значение из определенного (в x-данных block) title var в form.title?

Измененный блок:

  1. Я пробую: 

     $form['title']::{{ print_r($form['title'],true) }}

<dd class="key_values_rows_value_13" wire:model="form.title.lazy" x-data="{ title: ''}" >
<input
     x-model="title"
     x-on:blur="$dispatch('title', title)"
     id="title"
     class="form-control editable_field"
     placeholder="Enter descriptive title"
     autocomplete=off
 >

работает, но при любом нажатии вижу запрос. Похоже, ленивый режим здесь не работает. Как установить?

Когда форма открывается с существующими данными, мне нужно установить данные по умолчанию в x-init: 

$form['title']::{{ print_r($form['title'],true) }}
<dd class="key_values_rows_value_13" wire:model="form.title.lazy" x-data="{ title: ''}" x-init="title = '{{$form['title']}}'" >
<input
    x-model="title"
    x-on:blur="$dispatch('title', title)"
    id="title"
    class="form-control editable_field"
    placeholder="Enter descriptive title"
    autocomplete=off
 >

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

htmlspecialchars() expects parameter 1 to be string, array given (View: .../form.blade.php)

Какой путь допустим?

Измененный блок # 2 Спасибо, но мне что-то непонятно. Я сделал это как: 

<dd class="key_values_rows_value_13" wire:model.lazy="form.title" x-data="{ title: '{{$form['title']}}'}">

    <input
        x-model="title"
        x-on:blur="$dispatch('input', title)"
        id="title"
        class="form-control editable_field"
        placeholder="Enter descriptive title"
        autocomplete=off
    >
    @error('form.title')
    <div class="validation_error">{{ clearValidationError($message,['form.'=>'']) }}</div> @enderror
</dd>

  1. Работает, но в консоли я все еще вижу запросы вроде

    http://127.0.0.1: 8084 / livewire / message / admin.app-news

когда ввод теряет фокус. Не могу избавиться от этого запроса? Срабатывает ли он, когда для $ form назначены данные из alpine var?

в строке

x-on: blur = "$ dispatch ('input', title)"

- предопределенное событие 'input' в альпийский? Имеется ли ссылка на текущий элемент управления вводом?

Почему wire: model.lazy определен в обертке элемента dd? Я предположил, что это должно быть назначено для управления вводом?

Спасибо!

1 Ответ

1 голос
/ 05 августа 2020

Согласно документации Livewire в Alpine. js вы можете инициировать событие input, когда input размывается, используя x-on:blur="$dispatch('input', title)" соответствующий код из вашего примера: 

<dd class="key_values_rows_value_13" wire:model="form.title" x-data="{ title: ''}">
  <input
    x-model="search"
    x-on:blur="$dispatch('input', title)"
    id="title"
    class="form-control editable_field"
    placeholder="Enter descriptive title"
    autocomplete=off
  >
...