laravel　livewireでの値の渡し方

前提

livewireを初めて使います。
クリックした問題の答えだけが呼び出せるように、JSではなくlivewireを使ってみようとチュートリアルなどで少しlivewireを学習しました。ただ、同じようなケースも見つけれなくて、自分なりに作ってみようと始めてみました。

実現したいこと

ページに問題（10問）とクリックしたら解答が表示されるボタンを並べたいです。

発生している問題・エラーメッセージ

まずはそもそも、問題がviewに渡っていない。どなたかご教授いただけたらと思います。よろしくお願いいたします。

エラーメッセージ
Attempt to read property "en1" on null (View: C:\english_ssh\ssh\resources\views\livewire\study.blade.php)

該当のソースコード

php
1view/livewire.blade.php
2
3 <table class="table-box" style="border:solid 1px gray; margin:0 auto;">
4            <thead>
5                <tr style="background-color:darkseagreen">
6                    <th style="width:15%">テスト名</th>
7                </tr>
8            </thead>
9            <tbody id="tbl">
10                <tr>
11                    <td>{{ $word->test_name }}</td>
12                </tr>
13            </tbody>
14
15            <livewire:study :id="$id">
16
17

php
1
2view/livewire/study.blade.php
3
4<table class="table-all">
5    <thead>
6        <tr>
7            <th style="width:5%">番号</th>
8            <th style="width:30%">問題</th>
9            <th style="width:30%">正解</th>
10        </tr>
11    </thead>
12    <tbody id="tbl">
13                    <tr class="onetest">
14                        <td>1</td>
15                        <td>{{ $word->en1}}</td>
16                        <td style="color:red;">
17                        <button wire:click="answer1({{ $word->ja1}})">日本語で</button>
18                        </td>
19                    </tr>
20                    <tr class="onetest">
21                    <td>2</td>
22                        <td>{{ $word->en2}}</td>
23                        <td style="color:red;">
24                        <button wire:click="answer2({{ $word->ja2}})">日本語で</button>
25                        </td>
26                    </tr>

php
1<?php
2
3namespace App\Http\Livewire;
4
5use Livewire\Component;
6use Illuminate\Http\Request;
7use App\Models\Word;
8
9
10
11class Study extends Component
12{
13    public $word,$en1,$en2,$en3,$en4,$en5,$en6,$en7,$en8,$en9,$en10;
14
15    public function mount($id)
16    {
17        $word = Word::findOrFail($id);
18        $this->en1 = $word->en1;
19        $this->en2 = $word->en2;
20        $this->en3 = $word->en3;
21        $this->en4 = $word->en4;
22        $this->en5 = $word->en5;
23        $this->en6 = $word->en6;
24        $this->en7 = $word->en7;
25        $this->en8 = $word->en8;
26        $this->en9 = $word->en9;
27        $this->en10 = $word->en10;
28    }
29
30
31
32    public function render()
33    {
34
35    $word=Word::select('en1','en2','en3','en4','en5','en6','en7','en8','en9','en10')
36    ->where('en1','=', $this->en1)->where('en2','=',$this->en2)->first();
37        return view('livewire\study',[
38            'word'=>$word
39        ]);
40    }
41
42}
43

試したこと

Livewire/Study.phpの37行めに dd($word);入れてデバッグすると欲しいデータはきちんと渡っています。

補足情報（FW/ツールのバージョンなど）

laravel8
livewire2.11

行動規範の内容に同意します

回答1件

ベストアンサー

Livewireで最初に覚えることは「Studyクラスのpublicプロパティはblade側に渡されてそのまま使える」
Bladeコンポーネントと同じ仕様。
余計なことは全部不要でこれだけでいい。

php
1class Study extends Component
2{
3    public $word;
4
5    public function mount($id)
6    {
7        $this->word = Word::findOrFail($id);
8    }
9
10    public function render()
11    {
12        return view('livewire.study');
13    }
14}