alpinejs在livewire中如何从x数据分配数据?

时间:2020-08-05 14:50:00

标签: laravel-livewire alpine.js

在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摆脱它,并在文档中看到调度方法,然后尝试定义它:

<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数据块中)设置值时,如何处理事件 将标题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

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

  1. 在线

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

“输入”预定义事件在阿尔卑斯山吗?它引用当前的输入控件吗?

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

谢谢!

1 个答案:

答案 0 :(得分:1)

根据Livewire文档,您可以使用示例中的array([[1., 0.], [0., 1.], [0., 0.], [1., 0.], [0., 1.], [0., 0.]]) 相关代码在input模糊时触发Alpine.js中的input事件:

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