亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

返回 JSON,而不是使用數據綁定重新渲染組件

返回 JSON,而不是使用數據綁定重新渲染組件

PHP
慕斯王 2023-08-26 16:00:20
我創建了一個組件來根據輸入框中的初始值(本例中為 $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>
查看完整描述

1 回答

?
侃侃無極

TA貢獻2051條經驗 獲得超10個贊

問題解決了!


與 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>


查看完整回答
反對 回復 2023-08-26
  • 1 回答
  • 0 關注
  • 139 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號