英文:
Pass data from a Blade View to a Blade component
问题
I have the following controller which loads a view that contains a component along with the data fetched from the database. The view shows up with $data correctly. The issue I'm having is that the data I'm passing from the view to the 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 Transaction</h3>
</form>
</div>
<!-- Rest of your component HTML -->
</div>
Your AddTransaction Component class
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class AddTransaction extends Component
{
public $data;
public function __construct($data)
{
$this->data = $data;
}
public function render(): View|Closure|string
{
return view('components.add-transaction');
}
}
The code appears to be fine, but if you're encountering an "Undefined variable $data" error, ensure that the $data variable is properly passed to the view in your controller and that it's spelled correctly.
英文:
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 App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
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');
}
}
答案1
得分: 1
"我找到的解决方案是：“data是一个保留关键字，这就是为什么它对你不起作用。” 由driesvints提供（https://github.com/driesvints）"
英文:
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
当使用 php artisan make:component AddTransaction 创建组件时，它会在 app/View/Components 中创建一个 Blade 文件和一个组件类，代码如下：
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class AddTransaction extends Component
{
/**
* 创建一个新的组件实例。
*/
public function __construct()
{
//
}
/**
* 获取代表组件的视图/内容。
*/
public function render(): View|Closure|string
{
return view('components.add-transaction');
}
}
要能够将数据传递到组件中，您需要在 __construct() 函数中添加如下代码：
public function __construct(
public string $data
)
{
//
}
请确保调整变量的类型。如果您不确定类型，可以将其省略。
希望对您有所帮助。 
英文:
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 App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论