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

Question

我创建了一个组件来根据输入框中的初始值计算小费，在本例中为 $amount。我已经开始使用 Livewire 来了解它，安装和配置没有问题但是当我使用数据绑定从输入框呈现 $amount Laravel returns a JSON 而不是使用插入的值重新渲染组件。在控制台检查它发送 POST 和 returns 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');
    }
}

提示-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>

welcome.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>

Answer 1

问题已解决！

与 ReactJS 和 VueJS 一样，视图必须包装在 a 中才能由 DOM 呈现。所以，小费-calculator.blade.php一定是

<div class="columns is-mobile is-centered">
    {{-- All the code to be rendered --}}
    <p>{{ $amount }}</p>
</div>

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

Returning a JSON instead of re-rendering the component with data binding

php

laravel

bulma

laravel-livewire