Level 61
What about
@livewireAssets
Dec 26, 2019
33
Level 4
Livewire wire:click, wire:model not working
I am using laravel 6
I am following the video instructions on Building Data Tables with lifewire I have installed livewire and created a component which creates a controller and a blade page
now this commands: wire:model, wire:click are not working.
Livewire controller
<?php
namespace App\Http\Livewire;
use App\Post;
use Livewire\Component;
class PostsPage extends Component
{
public $search = 'Jerad Schmidt';
public function render()
{
return view('livewire.posts-page', [
'posts' => Post::where(
'title', 'LIKE', '%' . $this->search . '%'
)->orWhere(
'body', 'LIKE', '%' . request('search') . '%'
)->get()
]);
}
}
Livewire Blade page
<div>
<div>
<h2 class="is-size-3 has-text-centered mb-small">Latest Info </h2>
<div style="padding: .2em 1em;">
<input wire:model="search" class="input mb-medium" type="text" placeholder="Search through posts">
</div>
@foreach ($posts as $post)
@include('sections/partials/_post')
@endforeach
</div>
</div>
where I include livewire
<div class="container">
<div class="mt-medium">
<div class="columns">
<div class="column is-three-quarters">
@livewire('posts-page')
</div>
<div class="column">
Hello world from the other side of the country
</div>
</div>
</div>
</div>
Level 4
where am I suppose to include that?
Level 4
I have it in place on the app.blade.php file but its still not working
Level 61
Is it working now?
Level 4
Nope its not working, I accidentally click the best answer button
Level 61
Now I'm under pressure to give best answer to remedy this 🤦🏻♂️
1 like
Level 73
@successdav do you by any chance use Vue as well on the same DOM?
Level 4
yes, I have vue rendering the slider on the page
Level 61
I do not see wire:click in code you've presented us with.
Level 61
yes, I have vue rendering the slider on the page
When Livewire is crawling the DOM, if it encounters a Vue component, it will skip it's contents.
Level 4
I did the click test which did not work before proceeding to using the wire:model to bind a search input
Level 73
@successdav but do the posts appear on the page? So when you try to search there is no effect? That's what you are saying?
Level 4
Yep the post appears on the page but when I search no response and when I earlier tried wire:click no response either
Level 61
Have you tried to add live after the model?
<input wire:model.live="search"
Level 61
He probably changed the API, so check the docs https://laravel-livewire.com/docs/data-binding/ and try debounce or what is he using now.
Level 4
dint work
Level 61
Have you tried debounce?
Level 73
@successdav maybe your problem is here:
'posts' => Post::where(
'title', 'LIKE', '%' . $this->search . '%'
)->orWhere(
'body', 'LIKE', '%' . request('search') . '%'
)->get()
You are using the request() on one, use $this->search on both..
Or try
dd($this->search);
within the render function to make sure that there is a request made. Open your Network tab in the browser and check..
Level 61
I think he is using request('search') for initial search on the page? But it is strange that he is checking title for one and body for other.
Level 4
no luck
return view('livewire.posts-page', [
'posts' => Post::where(
'title', 'LIKE', '%' . $this->search . '%'
)->orWhere(
'body', 'LIKE', '%' . $this->search . '%'
)->get()
]);
and on the network no request is made when I type on the search input field
Level 73
@successdav no errors in the console? I would comment out the Vue component. And make sure that livewire assets are loaded, you can inspect that in your network tab, or in the elements.
Level 4
@nakov @bugsysha After a a whole day struggle I actually got this to work, the problem was with this keyword defer on my app.blade.php
<script src="{{ asset('js/app.js') }}" defer></script>
I dont know what the keyword does but when I remove the keyword "defer" everything now works fine
Thanks all for your effort in assisting me debug this issue
2 likes
Level 13
same here dude :D
Level 2
Ohh My God Unbelievable... This is working fine 100% for me
Level 73
@successdav Glad you got it working. But I don't know why you didn't get any errors when this did not worked..
Just FYI:
Basically, defer tells the browser to wait "until it's ready" before executing the javascript in that script block.
1 like
Level 4
So now that I had removed this keyword, will that affect performance
Level 73
@successdav I believe it is better to give you couple of links for you to read so you better understand what defer does.
Level 1
You can also read out this article.
http://www.phpzone.in/how-to-create-livewire-form-in-laravel-with-example/
Level 1
2 likes
Level 2
wire:click wasn't working for me but thanks @naim_biswas_ld, I realised @livewirescripts was missing. Adding that fixed it.
Level 1
Adding @LivewireScripts worked for me too
1 like
Please or to participate in this conversation.