我创建了一个组件来根据输入框中的初始值计算小费,在本例中为 $amount。我已经开始使用 Livewire 来了解它,安装和配置没有问题,但是当我使用数据绑定从输入框渲染 $amount 时,Laravel 返回 JSON 而不是重新渲染插入的组件价值。在控制台检查它会发送一个 POST 并返回一个 200 代码,但在打开它时会显示 419 错误代码。我正在使用 Bulma 作为 CSS 框架
提示计算器.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');
}
}
提示计算器.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>