livewire / volt

Volt is an elegantly crafted functional API for Livewire.
https://livewire.laravel.com/docs/volt
MIT License
339 stars 19 forks source link

Code inside rendering method fired two times #64

Closed tommy66374 closed 11 months ago

tommy66374 commented 11 months ago

Volt Version

1.3.3

Laravel Version

10.28.0

PHP Version

8.1.20

Database Driver & Version

No response

Description

Since Livewire Volt Doc not covered all the use case, so i'm not sure is this coding right.

The code inside rendering method fired two times.

May be we need a method to passing all data to Layout, NOT only ->title() method?

Steps To Reproduce

  1. Layout
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    ...

    <title>{{ $pageTitle }} - {{ config('app.name') }}</title>
    <meta name="description" content="{{ $pageDescription }}">
    <meta name="keywords" content="{{ $pageKeywords }}">

    ...
</head>

<body>
    <main>
        {{ $slot }}
    </main>
</body>
</html>
  1. Route
<?php
// web.php

use Illuminate\Support\Facades\Route;
use Livewire\Volt\Volt;

Route::prefix('admin')->name('admin.')->group(function () {
    // Livewire Volt full-page-component
    Volt::route('/users', 'admin.users.index')->name('users.index');
});
  1. Component
<?php
// resources/views/livewire/admin/users/index.blade.php

use App\Models\User;
use Illuminate\View\View;
use Livewire\Volt\Component;

new class extends Component
{
    public function rendering(View $view): View
    {
        info('test');           // fired two times, see laravel.log
        $users = User::all();   // fired two times, Laravel Debugbar show two query

        return $view
            ->with([
                'users' => $users,
            ])
            ->layoutData([
                'pageTitle' => 'Admin Dashboard',
                'pageDescription' => 'This is description',
                'pageKeywords' => 'This is keywords',
            ]);
    }
};
?>

<div>
    @foreach ($users as $user)
        ...
    @endforeach
</div>