前提・実現したいこと
この度初めて質問させていただきます。
何卒よろしくお願い申し上げます。
LaravelとLivewireで非同期通信を使ったアプリケーションを作成したいと思い、試しにLivewireドキュメントのクイックスタートのカウンター機能を作っている最中です。
xamppを使ったローカル環境にて試しております。
発生している問題・エラーメッセージ
カウンター機能は動作確認できたのですが、別のビューからaタグでカウンターのページに遷移した直後にカウントアップボタンを押しても反応がなく、リロードすると反応するようになります。
デベロッパーツールのConsoleタブにもエラーは特に出ていません。
これを遷移直後でも動作するようにしたいのですが、原因を突き止められずにいます。
試したこと
以下のパターンなら遷移直後でも問題なく動作しました。
- アドレスバーにパスを直接入力して遷移
- jsのonclick="location.href=''" で遷移
aタグを使ったままうまく動作させる方法がございましたら、ご教授いただきたく存じます。
該当のソースコード
resources/views/livewire/counter.blade.php
blade
1<div> 2 <button wire:click="increment">+</button> 3 <h1>{{ $count }}</h1> 4</div>
app/Http/Livewire/Counter.php
php
1<?php 2 3namespace App\Http\Livewire; 4 5use Livewire\Component; 6 7class Counter extends Component 8{ 9 public $count = 0; 10 11 public function increment() 12 { 13 $this->count++; 14 } 15 16 public function render() 17 { 18 return view('livewire.counter')->extends("layouts.template"); 19 } 20}
resources/views/test.blade.php
blade
1@extends('layouts.template') 2 3<div> 4 <a href="{{ route('counter') }}">カウンターへのリンク</a> 5 <button onclick="location.href='{{ route('counter') }}'">カウンターへのリンク</button> 6</div>
app/Http/Controller/TestController.php
php
1<?php 2 3namespace App\Http\Controllers; 4 5use Illuminate\Http\Request; 6 7class TestController extends Controller 8{ 9 public function index() 10 { 11 return view('test'); 12 } 13}
resources/views/layouts/template.blade.php
blade
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Livewire</title> 9 @livewireStyles 10</head> 11 12<body> 13 @yield('content') 14 15 @livewireScripts 16</body> 17 18</html>
routes/web.php
php
1<?php 2 3use Illuminate\Support\Facades\Route; 4 5Route::get('counter', App\Http\Livewire\Counter::class)->name("counter"); 6 7Route::get('test', 'App\Http\Controllers\TestController@index');
補足情報(FW/ツールのバージョンなど)
livewire 2.10
Laravel 8.83.15
xampp 8.1.4

あなたの回答
tips
プレビュー