返回 JSON，而不是使用数据绑定重新渲染组件

Question

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

Answer 1

问题解决了！

与 ReactJS 和 VueJS 一样，视图必须包装在 a 中才能由 DOM 渲染。所以，tip-calculator.blade.php 必须是

<div class="columns is-mobile is-centered">

    {{-- All the code to be rendered --}}

    <p>{{ $amount }}</p>

</div>