質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Livewire

Livewireは、JavaScriptを記述することなくPHPのみで動的コンポーネントを作成できるライブラリです。Bladeの構文をそのまま使用できるため、Laravelとの相性が良く、Vue.jsやReactよりシンプルに扱うことができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

1回答

2071閲覧

laravel livewireでの値の渡し方

hntake

総合スコア9

Livewire

Livewireは、JavaScriptを記述することなくPHPのみで動的コンポーネントを作成できるライブラリです。Bladeの構文をそのまま使用できるため、Laravelとの相性が良く、Vue.jsやReactよりシンプルに扱うことができます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2023/01/30 02:43

前提

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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}

view/livewire/study.blade.phpのどこかで$wordを表示して確認。

php

1@dump($word)

投稿2023/01/30 03:51

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hntake

2023/01/30 04:14

こんなにすっきりした書きかたなんですね。大変勉強になりました。ありがとございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問