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

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

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

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

Laravel

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

Q&A

解決済

1回答

3496閲覧

Laravel Livewireでページ遷移したときのスクロール位置を上まで戻したい

PenelopeG

総合スコア31

Livewire

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

Laravel

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

0グッド

0クリップ

投稿2022/01/03 22:25

前提・実現したいこと

Laravel初心者です。
今回、Laravel 8 + Livewireでクイズアプリを作っています。
(Larabel 8 + JetStreamのインストールでLivewireを選択しました)

クイズアプリのページ遷移は、以下のような動きです。
問題画面->解答画面->問題画面->解答画面->・・・(問題と解答を繰り返す)・・・->結果点数画面

ステータス変数に応じて画面を切り替え表示しています.

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

ここで困っているのが、問題画面でスクロールして解答画面に遷移すると、画面トップから表示されず、前の問題画面でのスクロール位置で表示されてしまう点です。

以下で同様の問題をみつけましたが解決には至っていないようです。
scroll to top of page - livewire component - alpine js

Reactでの解決方法は、
・スクロールトップ用のコンポーネントをつくる
・作ったコンポーネントでラップする
となっているので、LivewireでもAlpineJSを使って同じようなことをすれば良いのかと、Livewire公式ドキュメントを確認してみましたが、どうすれば良いか分からずに途方にくれております。

該当のソースコード

views/layouts/quizframe.blade.php

Blade

1<!DOCTYPE html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>クイズ</title> 7 @livewireStyles 8 <link href="{{ mix('css/app.css') }}" rel="stylesheet"> 9</head> 10<body> 11 <main class="main"> 12 <div class="holder"> 13 @livewire('quiz') 14 </div> 15 </main> 16 @livewireScripts 17 <script src="{{ mix('js/app.js') }}"></script> 18</body> 19</html>

views/livewire/quiz.blade.php

Blade

1{{-- 問題画面 --}} 2@if($flow == 'ques') 3 <div class="holder-inner question"> 4 ここに問題を表示(この部分がスクロールが必要になるほど長い) 5 選択問題で選択肢をクリックで解答画面へ 6 <ul> 7 <li wire:click="checkAnswer(選択肢Aのid)">選択肢A</li> 8 <li wire:click="checkAnswer(選択肢Bのid)">選択肢B</li> 9 </ul> 10 </div> 11@endif 12 13{{-- 解答画面 --}} 14@if($flow == 'answer') 15 <div class="holder-inner answer"> 16 ここに解答を表示 17 (この部分も解説文あり、スクロールが必要になるほど長い) 18 @if($num < 5) 19 <button wire:click="showQuestion">つぎの問題へ</button> 20 @else 21 <button wire:click="showResult">結果をみる</button> 22 @endif 23 </div> 24@endif 25 26{{-- 結果画面 --}} 27@if($flow == 'result') 28 <div class="holder-inner result"> 29 ここに結果を表示 30 </div> 31@endif 32

php

1<?php 2namespace App\Http\Livewire; 3 4use Livewire\Component; 5use App\Models\Question; 6use App\Models\Choice; 7 8class Quiz extends Component 9{ 10 public $flow; // 画面ステータス 11 12 public function mount() 13 { 14 $this->resetQuiz(); 15 $this->showQuestion(); 16 } 17 18 public function render() 19 { 20 return view('livewire.quiz') 21 ->layout('layouts.quizframe'); 22 } 23 24 public function resetQuiz() 25 { 26 // プロパティを初期化 27 } 28 29 public function showQuestion() 30 { 31 $this->flow = 'ques'; 32 // 問題を取得 33 } 34 35 public function checkAnswer($id) 36 { 37 $this->flow = 'answer'; 38 // 採点 39 } 40 41 public function showResult() 42 { 43 $this->flow = 'result'; 44 } 45}

ご教授いただけると助かります。
どうぞよろしくお願いします。

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

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

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

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

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

guest

回答1

0

自己解決

Livewireのブラウザイベントのディスパッチを使って自己解決出来ました。

質問で記していたQuizコンポーネントのレンダーでブラウザウィンドウイベントを発生させます。

php

1public function render() 2{ 3 $this->dispatchBrowserEvent('scroll-top'); 4 return view('livewire.quiz') 5 ->layout('layouts.quizframe'); 6}

BladeファイルでJavaScriptを使用してこのウィンドウイベントをリッスンしたら、上手くいきました。
views/livewire/quiz.blade.php

Blade

1<script> 2 window.addEventListener('scroll-top', event => { 3 window.scrollTo(0,0); 4 }) 5</script>

投稿2022/01/04 20:58

PenelopeG

総合スコア31

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問