livewire does not update variable after xhr

Question

Description: the 2 way data binding does not work, the value of the variable doesn't update.

Exact steps to reproduce

clean laravel installtaion
livewire install
livewire:make test

Stripped-down, copy-pastable code snippets

livewire/Test.php

    <?php
    
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    
    class Test extends Component
    {
        public $text;
    
        public function render()
        {
            return view('livewire.test');
        }
    }

livewire/test.blade.php

    <input type="text" wire:model="text">
    {{$text}}

welcome.blade.php

    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <title>Laravel</title>
    
            <!-- Fonts -->
            <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
            <livewire:styles />
            <style>
                body {
                    font-family: 'Nunito';
                }
            </style>
        </head>
        <body class="antialiased">
            <livewire:test/>
            <livewire:scripts />
        </body>
    </html>

Request Ppayload

    {fingerprint: {id: "p2OSso56TqMjMT4XN4Oo", name: "test", locale: "en"},…}
       fingerprint: {id: "p2OSso56TqMjMT4XN4Oo", name: "test", locale: "en"}
          id: "p2OSso56TqMjMT4XN4Oo"
          locale: "en"
          name: "test"
       serverMemo: {children: [], errors: [], htmlHash: "b6eb143a", data: {text: "te"}, dataMeta: [],…}
          checksum: "1949b7cded0c349a39cb3f8d9d36a92bd88d5c3a1b676544851ddd229d157c4c"
          children: []
          data: {text: "te"}
             text: "te"
          dataMeta: []
          errors: []
          htmlHash: "b6eb143a"
       updates: [{type: "syncInput", payload: {name: "text", value: "test"}}]
          0: {type: "syncInput", payload: {name: "text", value: "test"}}
          payload: {name: "text", value: "test"}
             name: "text"
             value: "test"
             type: "syncInput"

Context

Livewire version: 2.2
Laravel version: 8.10
Browser: [Edge, Chrome, Opera]

Does this answer your question? [Laravel Livewire component not refreshing/reloading automatically after refreshing it](https://stackoverflow.com/questions/60395647/laravel-livewire-component-not-refreshing-reloading-automatically-after-refreshi) — Qirel, Oct 15 '20 at 12:52
You need a single root element in your component's blade. You now have two, one text and one input. Wrap them in a `
`. — Qirel, Oct 15 '20 at 12:53

score 0 · Answer 1 · edited Jun 18 '22 at 16:03

0

As already written by Qirel your test.blade.php must only have one single root element like this

<div>
    <input type="text" wire:model="text">
    {{$text}}
</div>

edited Jun 18 '22 at 16:03

Laurel

5,965
14
31
57

answered Feb 01 '21 at 16:33

codedge

4,754
2
22
38

livewire does not update variable after xhr

1 Answers1