Question 168384 in Laravel Question posted in
The official Laravel Documentation can be found here.

How do I pass data from a Blade View to a Blade component in Laravel?

I have the following controller which loads a view that contains a component along with the data fetched from database, the view shows up $data correctly, the issue I’m having is the data I’m passing from the view to component is not showing up giving me the error "Undefined variable $data". Please can anyone suggest me a solution.

TransactionController

class TransactionController extends Controller
{

  public function index(){

      $data = TransactionType::all();
      return view('addtransaction', ['data' => $data]);

  }   

    
}

AddTransaction.blade.php (This is the view)

<!DOCTYPE html>
<html data-theme="light">
    <head>
        <title>Transactions</title>
        <meta name="description" content="Our first page" />
        <meta name="keywords" content="html tutorial template" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
        <link rel="stylesheet" href="{{ URL::asset('css/app.css') }}" />
    </head>
    <body>
        <main class="container">
       {{$data}}
        <x-user-nav></x-user-nav>

        
        
          <x-add-transaction :data="$data"></x-add-transaction>

           
            
        </main>
    </body>
</html>

add-transaction.blade.php (This is the component)

<div style="box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; padding: 30px;">
<div class="grid">
    <form action="/handleTransaction" method="POST">
        @csrf
       {{$data}}
        
                <h3>Add Transacton</h3>
            </div>
            <div class="grid">
                <div>
                    <label for="date">
                        Date
                        <input type="date" id="date" name="date" />
                    </label>
                </div>
                <div>
                    <label for="Type">Type</label>
                    <select name="type" required>
                        <option value="" selected>Select a type</option>
                     
                    </select>
                </div>
                <div>
                    <label for="From">From</label>
                    <select name="from" required>
                        <option value="" selected>Select an Account</option>
                        <option>Income</option>
                        <option>Expense</option>
                        <option>Transfer</option>
                    </select>
                </div>
                <div>
                    <label for="To">To</label>
                    <select name="to" required>
                        <option value="" selected>Select an Account</option>
                        <option>Income</option>
                        <option>Expense</option>
                        <option>Transfer</option>
                    </select>
                </div>
            </div>

            <div class="grid">
                <div class="col-4">
                    <label for="Description">
                        Description
                        <input type="text" id="desc" name="desc" placeholder="Description" required />
                    </label>
                </div>
                <div>
                    <label for="Reference">
                        Reference
                        <input type="text" id="ref" name="ref" placeholder="Reference" />
                    </label>
                </div>
                <div>
                    <label for="Amount">
                        Amount
                        <input type="text" id="amount" name="amount" placeholder="Amount" />
                    </label>
                </div>
                <div>
                    <br />
                    <input type="submit" value="Add" />
                </div>
                </form>
            </div>
</div>

My AddTransaction Component class

<?php

namespace AppViewComponents;

use Closure;
use IlluminateContractsViewView;
use IlluminateViewComponent;

class AddTransaction extends Component
{
    /**
     * Create a new component instance.
     */

     public $data;
    public function __construct($data)
    {

       $this->data = $data;
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.add-transaction');
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution I found was "data is a reserved keyword, which is why this doesn't works for you." by driesvints (https://github.com/driesvints)


  2. 0

    When creating a component with php artisan make:component AddTransaction it will create the blade file and a component class in app/View/Components which looks like this:

    <?php

namespace AppViewComponents;

use Closure;
use IlluminateContractsViewView;
use IlluminateViewComponent;

class AddTransaction extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.add-transaction');
    }
}

    To be able to pass data into the component, you have to add this to your __construct() function:

    public function __construct(
    public string $data
) 
{
    //
}

    Make sure to adjust the type of the variable.
    If you’re unsure about the type you can just leave it out.

    I hope this helps. 🙂

    Source: https://laravel.com/docs/10.x/blade#passing-data-to-components

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search