I've created a component to calculate a tip from an initial value in an input box, $amount in this case. I've started to use Livewire to learn about it, no problem with the install and config but when I've used a data binding to render $amount from the input box Laravel returns a JSON instead of re-rendering the component with the inserted value. Checking at the console it sends a POST and it returns a 200 code but when opening it shows a 419 error code. I'm using Bulma as CSS framework
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');
}
}
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>
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>
Problem solved!
Like ReactJS and VueJS the view must be wrapped inside a to be rendered by the DOM. So, the tip-calculator.blade.php must be
<div class="columns is-mobile is-centered">
{{-- All the code to be rendered --}}
<p>{{ $amount }}</p>
</div>
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
Laravel is a free open source PHP framework that came out in 2011. Since then, it has been able to become the framework of choice for web developers. One of the main reasons for this is that Laravel makes it easier, faster, and safer to develop complex web applications than any other framework.
https://laravel.com/
React is currently the leader in JavaScript UI frameworks. First, the Facebook developers started working on this to make their job easier. An app called Facebook Ads grew very quickly, which meant complex management and support. As a result, the team began to create a structure that would help them with efficiency. They had an early prototype before 2011, and two years later, the framework was open source and available to the public. It is currently used by many business giants: AirBNB, PayPal, Netflix, etc.
https://reactjs.org/
CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document written using a markup language.
It is mainly used as a means of describing, decorating the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
https://www.w3.org/TR/CSS/#css
Bulma is another popular CSS framework and its main feature is the fact that its components rely heavily on flexbox, which makes it truly modern. You may think that Bulma is somewhat similar to a hybrid of Bootstrap and Semantic UI, but without any complexity. It uses some of the same principles as Semantic User Interface, with class names, includes many popular components, but manages to keep things simple - for example, form elements are barely styled to maintain a cross-browser look.
https://bulma.io/
HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.