Home / Questions / 539611
Accepted
Jorge Edo. Hernández
Asked: 2022-08-10 06:42:23 +0800 CST 2022-08-10 06:42:23 +0800 CST

livewire component not listening to event from other component

  • 772

I am trying to render the posts table every time a post is created.

For this I have created the CreatPost component as follows:

class CreatePost extends Component
{
    public $title, $corpo;

    public function save()
    {
        Post::create([
            'title' => $this->title,
            'corpo' => $this->corpo
        ]);

        session()->flash('success', 'This is the message');

        $this->reset(['title','corpo']);

        $this->emit('postCreate');

    }

    public function render()
    {
        return view('livewire.create-post');
    }
}

and the ShowPosts component like so...

class ShowPosts extends Component
{
    protected $listeners = [
        'postCreate' => 'render'
    ];

    public function render()
    {
        $posts = Post::all();
        return view('livewire.show-posts',compact('posts'));
    }
}

Every time I create the post, the component saves the post in the database correctly, sends the session message correctly, resets the form data correctly and sends the 'postCreate' event correctly as shown in the image...

enter image description here

Only the ShowPosts component doesn't render again. When refreshing the page with f5, the new saved post is correctly displayed.

I leave the composer.json file so you can see the different versions of each library.

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.75",
        "laravel/sanctum": "^2.11",
        "laravel/tinker": "^2.5",
        "laravel/ui": "^3.4",
        "livewire/livewire": "^2.10"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^5.10",
        "phpunit/phpunit": "^9.5.10"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

Thanks for the help...

laravel

3 Answers

  1. Best Answer

    I think this will help with your problem.

    class ShowPosts extends Component
{

 public $posts;
 protected $listeners = [
    'postCreate' => 'getPost'
 ];

 public function mount(){
  $this->getPost();
 }

 public function render()
 {
    return view('livewire.show-posts');
 }
 public function getPost(){
    $this->posts = Post::all();
 }
}
    • 1

  2. Try changing the ShowPosts listener to this.

    protected $listeners = ['postCreate' => '$refresh'];

    That will do the magic.

    • 0

  3. Good day,

    The problem is renderthat you do:

    class ShowPosts extends Component
{
    protected $listeners = [
        'postCreate' => 'render'
    ];

    public function render()
    {
        $posts = Post::all();
        return view('livewire.show-posts',compact('posts'));
    }
}

    In the line $posts = Post::all();you only get the Posts that are in the database at the time the page is rendered and therefore when creating or editing elements it will not be reflected in your view.

    One option would be to make a variable that can be available in the view when using mount, as Fabián put in his answer, another option is to create a property that gets the rows from the database and pass the result to the view, this would work for you very much if at some point you were interested in creating an advanced search (for example that searches fields from different columns) of your data.

    You could create a property rowsQueryto get the rows from Postand include for example some lookup, assuming you have a variable filtersto filter the table and a searchlookup field you could use the method when, what I would do is, if it filters['search']has some value then it looks in the table the elements where the value of filters['search']appears in the column name(You could ignore this and only do $query = Post::all()it if you wanted to always get all the rows). But you could add others whento be able to filter each of your columns.

    public function getRowsQueryProperty()
{
    $query = Post::query()
    ->when($this->filters['search'], fn($query, $search) => $query->where('name', 'like', '%'.$search.'%'));

    return $query;
}

    And another property rowsto get the rows after the search filter

    public function getRowsProperty()
{
    return $this->rowsQuery;
}

    Note: You could do everything from a property but what I do getRowsQueryPropertyis first generate the query with N number of filters and then getRowsPropertyget the rows and if desired or necessary, apply pagination or ordering on this property, that's why I separate it, so that one property is just for the query and one that outputs the rows after any sorting, paging or other functions you need/want.

    This new property rowsis the one you are going to pass in render( Note: being properties you can use them as $this->rowsQueryand $this->rows)

    public function render()
{
    return view('livewire.show-posts', [
        'posts' => $this->rows,
    ]);
}

    The advantage of this method is that if you create, edit or delete elements, it will be reflected in the view and I think it makes the code clear so that it can be reused in the future in another application.

    • 0