CODEWITHSUNDEEP
laravellaravel-livewire
Tahmid
Tahmid

Reputation: 83

Why Laravel-livewire 'wire:model' not working?

I am using Laravel 8.

My Livewire Controller

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class SearchDropdown extends Component
{
    public $search = 'hello there';
    public function render()
    {
        return view('livewire.search-dropdown');
    }
}

Livewire blade

<div class="relative mt-3 md:mt-0">
    <input wire:model="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
    <div class="absolute top-0">
        <svg class="fill-current w-4 text-gray-500 mt-2 ml-2" viewBox="0 0 24 24"><path class="heroicon-ui" d="M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z"/></svg>
    </div>
    <div class="absolute text-sm bg-gray-800 rounded w-64 mt-4">
        <ul>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">{{ $search }}</a>
            </li>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">Avengers</a>
            </li>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">Avengers</a>
            </li>
        </ul>
    </div>
</div>

I have included Livewire in my main.blade file

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Movie App</title>

    <link rel="stylesheet" href="{{ URL::asset('/css/main.css') }}">
    <livewire:styles />
</head>

And this before the end of the body

<livewire:scripts />

Now when I write something in my searchbox, it should have updated as i write, but it's not updating instead showing "hello there" - initial value of the $search variable.

P.S : This is what its showing in my browser. For some reason livewire.js is getting error. How to fix this?

Upvotes: 6

Views: 25107

Answers (10)

Riki krismawan
Riki krismawan

Reputation: 567

for livewire 3 use wire.model.live same as in livewire 2 wire.model

i am lost not reading documentation upgrage

https://livewire.laravel.com/docs/upgrading#wiremodel livewire model documentation

Upvotes: 0

Fabri
Fabri

Reputation: 86

Livewire only updates a component when an "action" is submitted—like pressing a submit button—not when a user types into a field. This cuts down on network requests and improves performance. To enable "live" updating as a user types, you can use wire:model.live instead.

Upvotes: 5

Ahmed Hagrs
Ahmed Hagrs

Reputation: 131

you can just use

wire:model.live="search"

Upvotes: 13

Mr U.
Mr U.

Reputation: 173

I had this issue and found that I had accidentally placed my livewire <form> inside another <form> tag. Oops! 😬

Upvotes: 0

Dereje Desalegn
Dereje Desalegn

Reputation: 1

just run php artisan optimize

that worked for me

Upvotes: -1

Ahmed
Ahmed

Reputation: 69

I faced this problem and I solve it by just clearing cache ...

try to add this code snippet to your web route for fast clearance of caches

Route::get('/clear', function() {
    Artisan::call('cache:clear');
    Artisan::call('route:cache');
    Artisan::call('view:clear');
    Artisan::call('config:cache');
    return  "all cleared ...";

});

or just in cmd

Php artisan cache:clear
Php artisan route:cache

.... and so on

Upvotes: 0

Meysam Zarei
Meysam Zarei

Reputation: 439

Try wrapping your content with a div and container class in your Livewire blade.

<div class="container">
<div class="relative mt-3 md:mt-0">
    <input wire:model="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
    <div class="absolute top-0">
        <svg class="fill-current w-4 text-gray-500 mt-2 ml-2" viewBox="0 0 24 24"><path class="heroicon-ui" d="M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z"/></svg>
    </div>
    <div class="absolute text-sm bg-gray-800 rounded w-64 mt-4">
        <ul>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">{{ $search }}</a>
            </li>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">Avengers</a>
            </li>
            <li class="border-b border-gray-700">
                <a href="#" class="block hover:bg-gray-700 px-3 py-3">Avengers</a>
            </li>
        </ul>
    </div
</div>

Upvotes: 0

Akki
Akki

Reputation: 11

I had the same issue, fixed it by adding

 <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>

in the main layout file because apparently, it was missing that.

Upvotes: 1

Naim Biswas
Naim Biswas

Reputation: 88

Add

@livewireStyles
        <link rel="stylesheet"
            href="{{ mix('css/app.css') }}">

and

<script src="{{ mix('js/app.js') }}"></script>
        @livewireScripts

at your main layouts file, I think it should be worked

Upvotes: 1

Tahmid
Tahmid

Reputation: 83

I followed the advise by @Kamlesh Paul and it worked.

you need to setup livewire base url

in config/livewire.php

'asset_url'  =>  env('APP_URL', 'http://localhost'),

then in .env

APP_URL=your_app_url

Upvotes: -1

Related Questions