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

Question

我创建了一个组件来根据输入框中的初始值（本例中为 $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>

Answer 1

问题解决了！与 ReactJS 和 VueJS 一样，视图必须包装在 a 中才能由 DOM 渲染。所以，tip-calculator.blade.php 必须是<div class="columns is-mobile is-centered">&nbsp; &nbsp; {{-- All the code to be rendered --}}&nbsp; &nbsp; <p>{{ $amount }}</p></div>