0

入力ボックスの初期値 (この場合は $amount) からチップを計算するコンポーネントを作成しました。インストールと構成に問題はありませんが、データバインディングを使用して入力ボックスから$ amountをレンダリングすると、Laravelは挿入されたコンポーネントを再レンダリングする代わりにJSONを返します価値。コンソールで確認すると、POST が送信され、200 コードが返されますが、開くと 419 エラー コードが表示されます。Bulma を CSS フレームワークとして使用しています

TipCalculator.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class TipCalculator extends Component
{
    public $amount;
    public $percentage;
    public $tip;
    public $total;

    public function submit()
    {

    }

    public function render()
    {
        return view('livewire.tip-calculator');
    }
}

tip-calculator.blade.php

<div class="columns is-mobile is-centered">
    <div class="column is-half">
        <h1 class="title">Calculadora de propinas</h1>
        <form wire:submit.prevent="submit">
            {{ csrf_field() }}
            <div class="field">
                <label class="label">Ingrese monto a pagar</label>
                <div class="control">
                    <input class="input" wire:model="amount" type="text" placeholder="Monto a pagar">
                </div>
            </div>

            <div class="field">
                <label class="label">Ingrese porcentaje de propina</label>
                <div class="control">
                    <input class="input" type="text" placeholder="Porcentage de propina">
                </div>
            </div>

            <div class="columns">
                <div class="column">
                    <div class="field">
                        <label class="label">Total Propina</label>
                        <div class="control">
                            <input class="input" type="text" placeholder="Propina" readonly>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="field">
                        <label class="label">Total a pagar</label>
                        <div class="control">
                            <input class="input" type="text" placeholder="Total" readonly>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<p>{{ $amount }}</p>

ようこそ.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <livewire:styles>
    </head>
    <body>
        <div class="container">
            <livewire:tip-calculator />
        </div>
        <livewire:scripts>
    </body>
</html>
4

1 に答える 1