Search code examples
phphtmlgoogle-chromelaravel-blade

Weird Laravel Blade Rendering


A section in my blade template looks like this

 <form action='{{ route($type.'.update') }}' method='POST'>
        @csrf
        <div class="max-w-3xl mx-auto mt-4 p-4 bg-white rounded-lg shadow-md">
            <table class="w-full border-collapse border border-gray-300">

After inspecting this is the output:

<form action="http://localhost:8000/edit_users" method="POST">
        <input type="hidden" name="_token" value="Br4Q0OlTHNsSUHeCLCQXjcuZNdyQsbOY8qNTdDUK" autocomplete="off">        <div class="max-w-3xl mx-auto mt-4 p-4 bg-white rounded-lg shadow-md">
            

                                    0
                    
                                    1
                    <table class="w-full border-collapse border border-gray-300">

Which includes a spurious "0" and "1." Weirdly, when I view source on the same page, I get:

 <form action='http://localhost:8000/edit_users' method='POST'>
        <input type="hidden" name="_token" value="Br4Q0OlTHNsSUHeCLCQXjcuZNdyQsbOY8qNTdDUK" autocomplete="off">        <div class="max-w-3xl mx-auto mt-4 p-4 bg-white rounded-lg shadow-md">
            <table class="w-full border-collapse border border-gray-300">

Which lacks those spurious elements. However when I view the rendered page, I get: enter image description here

Which includes them

I rendered my Laravel blade in my CRUD app. I expected a table showing users to edit. I got a page with spurious elements.


Solution

  • Later in my template I had

    {{ $index = $loop->index }}
    

    Because I wanted to use an outer loop index in an inner loop. What I didn't realize was that the blade directive echoes the result of an assignment. Since I had two items in my outer loop and since I had the directive placed outside a <td>, The loop indexes ended up displaying at the top of the table. I changed the code to read

    @php($index=$loop->index)
    

    And that got rid of the problem.

    Thanks to @Adyson for pointing the way.