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

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

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

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

Laravel

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

Q&A

0回答

1410閲覧

Laravel・Livewireの非同期通信がリロードをしないと反映されない

ginringo

総合スコア0

Livewire

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

Laravel

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

0グッド

0クリップ

投稿2022/06/30 03:21

前提・実現したいこと

この度初めて質問させていただきます。
何卒よろしくお願い申し上げます。

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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問