0

Estoy intentando renderizar la tabla de posts cada vez que un post sea creado.

Para esto he creado el componente CreatPost de la siguiente manera:

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');
    }
}

y el componente ShowPosts así...

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

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

Cada vez que creo el post, el componente guarda el post en la base de datos correctamente, envia mensaje de sesión correctamente, resetea los datos del formulario correctamente y envia el evento 'postCreate' correctamente como lo muestra la imagen...

introducir la descripción de la imagen aquí

Solo que el componente ShowPosts no se renderiza nuevamente. Al actualizar la página con f5, se muestra correctamente el nuevo post guardado.

Dejo el archivo composer.json para que miren las diferentes versiones de cada biblioteca.

{
    "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
}

Gracias por la ayuda...

1
  • Buen día, si alguna respuesta te fue útil no olvides aceptarla, de esa forma ayudas a otros usuarios a encontrar la solución a preguntas similares y al mismo tiempo ayudas a la comunidad a mantener abiertas únicamente las preguntas que no han sido resueltas. ¿Qué debo hacer cuando alguien contesta mi pregunta? el 24 jun. 2022 a las 2:01

3 respuestas 3

2

Creo que este ayudara con tu problema.

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();
 }
}
2
  • 1
    Una buena respuesta explica donde reside el problema y porque tu solución lo arregla. Para poder entenderlo mejor.
    – adrigo
    el 15 jun. 2022 a las 6:07
  • Exactamente era lo que encontraba, sin tanto verbo y una explicación simple...me ayudó mucho... el 25 jun. 2022 a las 12:56
0

Prueba a cambiar el listener de ShowPosts por esto.

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

Eso hará la mágia.

1
  • Gracias por la repuesta, pero no ha funcionado, ya lo había intentando y no funcionó... el 10 jun. 2022 a las 0:12
0

Buen día,

El problema está en el render que haces:

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

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

En la línea $posts = Post::all(); obtienes únicamente los Post que hay en la base de datos al momento de que la página se renderiza y por lo tanto al crear o editar elementos no se reflejará en tu vista.

Una opción sería hacer una variable que pueda estar disponible en la vista al utilizar mount, tal como puso Fabián en su respuesta, otra opción es crear una propiedad que obtenga las filas de la base de datos y pasar el resultado a la vista, esto te serviría mucho si en algún momento te interesara crear una búsqueda avanzada (Por ejemplo que busque campos de diferentes columnas) de tus datos.

Podrías crear una propiedad rowsQuery para obtener las filas de Post e incluir por ejemplo alguna búsqueda, suponiendo que tienes una variable filters para filtrar la tabla y un campo search de búsqueda podrías utilizar el método when, lo que haría es, en caso de que filters['search'] tenga algún valor entonces busca en la tabla los elementos donde el valor de filters['search'] aparezca en la columna name (Esto podrías ignorarlo y únicamente hacer $query = Post::all() si quisieras siempre obtener todas las filas). Pero podrías agregar otros when para poder filtrar cada una de tus columnas.

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

    return $query;
}

Y otra propiedad rows para obtener las filas después del filtro de búsqueda

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

Nota: Podrías hacerlo todo desde una propiedad pero lo que yo hago en getRowsQueryProperty es primero generar la consulta con N cantidad de filtros y luego en getRowsProperty obtener las filas y si se desea o es necesario, aplicar paginación u ordenamiento en esta propiedad, es por eso que lo separo, para que una propiedad sea únicamente para la consulta y otra que genera las filas después de cualquier ordenamiento, paginación u otras funciones que necesite/desee.

Esta nueva propiedad rows es la que vas a pasar en render (Nota: al ser propiedades puedes utilizarlas como $this->rowsQuery y $this->rows)

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

La ventaja de este método es que si creas, editas o borras elementos se va a reflejar en la vista y creo que deja el código claro para que pueda ser reutilizado en un futuro en otra aplicación

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.