title: How in livewire alpinejs assign data from x-data?
body: <p>In laravel 7 /livewire 1.3 / turbolinks:5.2 / alpine@v2 app I have crud editor
  as component with $form defined</p>
  <pre><code>class AppNews extends Component
  {
      use WithPagination;
      use WithFileUploads;
  
      public $form = [
          'title'           =&gt; '1',
          'slug'            =&gt; '',
          'content'         =&gt; '2',
          'content_shortly' =&gt; '3',
  </code></pre>
  <p>and editor with inpoyt defined:</p>
  <pre><code>&lt;form class=&quot;form-editor&quot; @if($updateMode=='edit')  wire:submit.prevent=&quot;update&quot; @else  wire:submit.prevent=&quot;store&quot; @endif &gt;
              &lt;div class=&quot;card&quot;&gt;
                  &lt;div class=&quot;card-body card-block&quot;&gt;                                    
                      
                      &lt;dl class=&quot;block_2columns_md m-3&quot;&gt; &lt;!-- title FIELD DEFINITION --&gt;
                          &lt;dt class=&quot;key_values_rows_label_13&quot;&gt;
                              &lt;label class=&quot;col-form-label&quot; for=&quot;title&quot;&gt;Title:&lt;/label&gt;
                          &lt;/dt&gt;
                          &lt;dd class=&quot;key_values_rows_value_13&quot;&gt;
                              &lt;input
                                  wire:model.lazy=&quot;form.title&quot;
                                  id=&quot;title&quot;
                                  class=&quot;form-control editable_field&quot;
                                  placeholder=&quot;Enter descriptive title&quot;
                                  autocomplete=off
                              &gt;
                              @error('form.title')
                              &lt;div class=&quot;validation_error&quot;&gt;{{ clearValidationError($message,['form.'=&gt;'']) }}&lt;/div&gt; @enderror
                          &lt;/dd&gt;
                      &lt;/dl&gt; &lt;!-- &lt;dt class=&quot;block_2columns_md m-0&quot;&gt; title FIELD DEFINITION --&gt;
  
                      
  </code></pre>
  <p>and it works for me except, in the console I see a lot of additive requests, like</p>
  <pre><code>http://127.0.0.1:8084/livewire/message/admin.app-news
  </code></pre>
  <p>when I modify some fields of the form
  I try to get rid of it with alpineJS and in the docs I see dispatch method and I try to define it :</p>
  <pre><code>&lt;dl class=&quot;block_2columns_md m-3&quot;&gt; 
      &lt;dt class=&quot;key_values_rows_label_13&quot;&gt;
          &lt;label class=&quot;col-form-label&quot; for=&quot;title&quot;&gt;Title:&lt;/label&gt;
      &lt;/dt&gt;
      &lt;dd class=&quot;key_values_rows_value_13&quot; wire:model=&quot;form.title&quot; x-data=&quot;{ title: ''}&quot;&gt;
          &lt;input
              x-model=&quot;search&quot;
              id=&quot;title&quot;
              class=&quot;form-control editable_field&quot;
              placeholder=&quot;Enter descriptive title&quot;
              autocomplete=off
          &gt;
          @error('form.title')
          &lt;div class=&quot;validation_error&quot;&gt;{{ clearValidationError($message,['form.'=&gt;'']) }}&lt;/div&gt; @enderror
      &lt;/dd&gt;
  &lt;/dl&gt; 
  </code></pre>
  <p>But how can I on event when field is edited(focus changed) to set value from defined (in x-data block)
  title var into form.title ?</p>
  <p><strong>Modified block :</strong></p>
  <ol>
  <li><p>I try :</p>
  <pre><code> $form['title']::{{ print_r($form['title'],true) }}
  
  &lt;dd class=&quot;key_values_rows_value_13&quot; wire:model=&quot;form.title.lazy&quot; x-data=&quot;{ title: ''}&quot; &gt;
  &lt;input
       x-model=&quot;title&quot;
       x-on:blur=&quot;$dispatch('title', title)&quot;
       id=&quot;title&quot;
       class=&quot;form-control editable_field&quot;
       placeholder=&quot;Enter descriptive title&quot;
       autocomplete=off
   &gt;
  </code></pre>
  </li>
  </ol>
  <p>it works but on any keydown I see request. Looks like lazy mode does not work here.
  How to set it ?</p>
  <ol start="2">
  <li><p>When form is opened with existing data I need to set default data in x-init:</p>
  <pre><code>$form['title']::{{ print_r($form['title'],true) }}
  &lt;dd class=&quot;key_values_rows_value_13&quot; wire:model=&quot;form.title.lazy&quot; x-data=&quot;{ title: ''}&quot; x-init=&quot;title = '{{$form['title']}}'&quot; &gt;
  &lt;input
      x-model=&quot;title&quot;
      x-on:blur=&quot;$dispatch('title', title)&quot;
      id=&quot;title&quot;
      class=&quot;form-control editable_field&quot;
      placeholder=&quot;Enter descriptive title&quot;
      autocomplete=off
   &gt;
  </code></pre>
  </li>
  </ol>
  <p>as result input has valid data on form opened, byt trying to edit input I got error :</p>
  <pre><code>htmlspecialchars() expects parameter 1 to be string, array given (View: .../form.blade.php) 
  </code></pre>
  <p>Which way is valid ?</p>
  <p><strong>Modified block # 2</strong>
  Thanks, but there is something unclear for me . I made it as :</p>
  <pre><code>&lt;dd class=&quot;key_values_rows_value_13&quot; wire:model.lazy=&quot;form.title&quot; x-data=&quot;{ title: '{{$form['title']}}'}&quot;&gt;
  
      &lt;input
          x-model=&quot;title&quot;
          x-on:blur=&quot;$dispatch('input', title)&quot;
          id=&quot;title&quot;
          class=&quot;form-control editable_field&quot;
          placeholder=&quot;Enter descriptive title&quot;
          autocomplete=off
      &gt;
      @error('form.title')
      &lt;div class=&quot;validation_error&quot;&gt;{{ clearValidationError($message,['form.'=&gt;'']) }}&lt;/div&gt; @enderror
  &lt;/dd&gt;
  </code></pre>
  <ol>
  <li><p>It works, But in the console I still see requests, like</p>
  <p><a href="http://127.0.0.1:8084/livewire/message/admin.app-news" rel="nofollow noreferrer">http://127.0.0.1:8084/livewire/message/admin.app-news</a></p>
  </li>
  </ol>
  <p>when the input lose focus. I can not get rid of this request? Is it triggered when for $form
  data from alpine var is assigned?</p>
  <ol start="2">
  <li><p>in line</p>
  <p>x-on:blur=&quot;$dispatch('input', title)&quot;</p>
  </li>
  </ol>
  <p>is 'input' predefined event in alpine? Is it referenced to current input control ?</p>
  <ol start="3">
  <li>Why wire:model.lazy is defined in wrapping dd element? I supposed it must be assigned to input control ?</li>
  </ol>
  <p>Thanks!</p>