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

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

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

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

Laravel

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

0回答

259閲覧

livewireのformメゾットを利用して検索機能を実行できるようにしたい

takano

総合スコア0

Livewire

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

Laravel

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2024/07/24 12:07

実現したいこと

管理画面の上部にある検索機能で、名前とメールアドレス・性別・お問合せの種類・日付でキーワード検索してその結果を一覧で表示させたい。
(例:性別を女性で検索→性別が女性のみで一覧表示。木嶋で検索→名前で木嶋がある行のみ表示)
スクリーンショット 2024-07-24 20.10.32
スクリーンショット 2024-07-24 20.11.29

発生している問題・分からないこと

以下のコードを元に検索を実行したのですが、ボタンのアクションはあるものの検索結果が変わらないままです。どこかおかしい部分があれば教えていただけたら助かります。

該当のソースコード

livewire

1<div> 2 <form class="form" wire:submit="save"> 3 <input class="search__text" type="search" wire:model="keyword" placeholder="名前やメールアドレスを入力してください" value="{{ old('keyword') }}" /> 4 <span class="search__gender"> 5 <select class="select__gender" wire:model="gender"> 6 <option value="">性別</option> 7 <option value="">全て</option> 8 <option value="男性">男性</option> 9 <option value="女性">女性</option> 10 <option value="その他">その他</option> 11 </select> 12 </span> 13 <span class="search__category"> 14 <select class="select__category" wire:model="category_id"> 15 <option value="">お問い合わせの種類</option> 16 @foreach($categories as $category) 17 <option value="{{ $category['content'] }}"> 18 {{ $category['content'] }} 19 </option> 20 @endforeach 21 </select> 22 </span> 23 <input class="search__date" type="date" wire:model="created_at" /> 24 <button class="search__button" type="submit">検索</button> 25 <input class="reset__button" type="reset" value="リセット" /> 26 </form> 27 <div class="buttons"> 28 <div class="export-btn"> 29 <button class="export">エクスポート</button> 30 </div> 31 <div class="paginate"> 32 @if($results) 33 {{ $searches->links() }} 34 @else 35 {{ $contacts->links() }} 36 @endif 37 </div> 38 </div> 39 <div class="contacts"> 40 <table class="contacts__table"> 41 <tr class="table-heading"> 42 <th class="column">お名前</th> 43 <th class="column">性別</th> 44 <th class="column">メールアドレス</th> 45 <th class="column" colspan="2">お問い合わせ種類</th> 46 </tr> 47 @if($results) 48 @foreach($searches as $search) 49 <tr class="table-inner"> 50 <td class="name"> 51 {{ $search['last_name'] }} 52 <span class="space"></span> 53 <span class="first">{{ $search['first_name'] }}</span> 54 </td> 55 <td class="gender"> 56 <input type="hidden" value="{{ $search['gender'] }}" /> 57 <?php 58 if ($search['gender'] == '1') { 59 echo '男性'; 60 } elseif ($search['gender'] == '2') { 61 echo '女性'; 62 } else { 63 echo 'その他'; 64 } 65 ?> 66 </td> 67 <td class="address"> 68 {{ $search['email']}} 69 </td> 70 <td class="category"> 71 {{ $search['category']['content']}} 72 </td> 73 <td class="detail-button"> 74 <button wire:click="openModal({{ $search['id'] }})" type="button" class="detail">詳細</button> 75 </td> 76 </tr> 77 @endforeach 78 @else 79 @foreach($contacts as $contact) 80 <tr class="table-inner"> 81 <td class="name"> 82 {{ $contact['last_name'] }} 83 <span class="space"></span> 84 <span class="first">{{ $contact['first_name'] }}</span> 85 </td> 86 <td class="gender"> 87 <input type="hidden" value="{{ $contact['gender'] }}" /> 88 <?php 89 if ($contact['gender'] == '1') { 90 echo '男性'; 91 } elseif ($contact['gender'] == '2') { 92 echo '女性'; 93 } else { 94 echo 'その他'; 95 } 96 ?> 97 </td> 98 <td class="address"> 99 {{ $contact['email']}} 100 </td> 101 <td class="category"> 102 {{ $contact['category']['content']}} 103 </td> 104 <td class="detail-button"> 105 <button wire:click="openModal({{ $contact['id'] }})" type="button" class="detail">詳細</button> 106 </td> 107 </tr> 108 @endforeach 109 @endif 110 </table> 111 112 113 114

livewire

1<?php 2 3namespace App\Http\Livewire; 4 5use Livewire\Component; 6use App\Models\Contact; 7use App\Models\Category; 8use Illuminate\Http\Request; 9use Livewire\WithPagination; 10 11class Modal extends Component 12{ 13 use WithPagination; 14 15 public $showModal = false; 16 17 public $result = []; 18 public $results; 19 20 protected $paginationTheme = 'bootstrap'; 21 22 protected $contacts; 23 protected $searches; 24 25 public $keyword = ''; 26 public $gender = ''; 27 public $category_id = ''; 28 public $created_at = ''; 29 30 public function save() 31 { 32 $this->result= Contact::where(function($query){ 33 $query->where('last_name', '=', $this->keyword)->orWhere('first_name', '=', $this->keyword)->orWhere('email','=',$this->keyword)->orWhere('last_name','like','%'.$this->keyword.'%')->orWhere('first_name', 'like', '%' . $this->keyword . '%')->orWhere('email', 'like', '%' . $this->keyword . '%')->orWhere('gender', $this->gender)->orWhere('category_id', $this->category_id)->orWhere('created_at', $this->created_at); 34 })->get(); 35 36 $this->results = true; 37 38 } 39 40 public function render() 41 { 42 $categories = Category::all(); 43 44 if(!$this->results == true){ 45 $contacts = Contact::with('category')->paginate(7); 46 return view('livewire.modal', compact('categories', 'contacts')); 47 }else{ 48 $searches = Contact::with('category')->paginate(7); 49 return view('livewire.modal', compact('categories', 'searches')); 50 } 51 } 52

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

laravelのlivewire formとwire:submit="save" のマニュアルがあったのでそれを参考にしましたが、上記の質問の通り上手くいかず検索機能が実行できていない状態です。
https://livewire.laravel.com/docs/forms

補足

特になし

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.40%

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

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

質問する

関連した質問