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 ?

修改块：

我试试:

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

有效，但在控制台中我仍然看到请求，例如

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

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

在线

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

'input' 是 alpine 中的预定义事件吗？是否参考当前输入控制？

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

谢谢！

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
  >

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

How in livewire alpinejs assign data from x-data?

laravel-livewire

alpine.js