livewire alpinejs 如何从 x-data 分配数据？

Question

在 laravel 7 /livewire 1.3 / turbolinks:5.2 / alpine@v2 应用程序中，我有 crud 编辑器 作为定义了 $form 的组件

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

当我修改表单的某些字段时 我尝试用 alpineJS 摆脱它，在文档中我看到了 dispatch 方法并尝试定义它：

<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 数据块中）设置值时，我如何处理事件 将 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
    >
   

它有效，但在任何按键下我都看到了请求。看起来懒惰模式在这里不起作用。 如何设置？

1. 当使用现有数据打开表单时，我需要在 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

当输入失去焦点时。我无法摆脱这个请求？是否在 for $form 时触发 分配来自 alpine var 的数据？

1. 排队

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

是 alpine 中的“输入”预定义事件吗？是否引用了当前输入控件？

1. 为什么在包装 dd 元素时定义了 wire:model.lazy？我想它必须分配给输入控件？

谢谢！

Answer 1

根据 Livewire 文档，在 Alpine.js 中，当 input 使用示例中的 x-on:blur="$dispatch('input', title)" 相关代码模糊时，您可以触发 input 事件：

<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
  >