在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吗?
修改后的块:
我尝试:
$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>
它可以工作,但是在控制台中我仍然看到请求,例如
当输入失去焦点时。我不能摆脱这个要求吗?是否为$ form触发 来自高山var的数据已分配?
在线
x-on:blur =“ $ dispatch('input',title)”
“输入”预定义事件在阿尔卑斯山吗?它引用当前的输入控件吗?
谢谢!
答案 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)"