Laravel Livewire点击提交
Laravel Livewire是一个开源的PHP框架，用于构建现代化的、交互式的Web应用程序。它结合了Laravel框架的优雅和简洁，以及实时的、动态的用户界面交互。
Laravel Livewire的主要特点包括：
- 实时交互：Livewire通过使用AJAX技术，使得前端和后端之间的数据交互变得实时和动态。这意味着在不刷新整个页面的情况下，可以实时更新部分页面内容，提供更好的用户体验。
- 无需JavaScript：相比于传统的JavaScript框架，Livewire允许开发者在不编写任何JavaScript代码的情况下，实现复杂的前端交互。这对于那些不熟悉JavaScript或希望减少前端开发工作量的开发者来说非常有用。
- 组件化开发：Livewire采用组件化的开发方式，将页面划分为多个可重用的组件。每个组件都有自己的逻辑和视图，可以独立开发和测试。这种模块化的开发方式提高了代码的可维护性和可扩展性。
- 与Laravel集成：Livewire是Laravel框架的一部分，可以无缝集成到现有的Laravel应用程序中。它与Laravel的ORM、路由、验证等功能紧密结合，提供了更高效的开发体验。
Laravel Livewire适用于以下场景：
- 实时表单验证：Livewire可以在用户输入数据时实时验证表单，并提供实时反馈。这对于需要即时验证用户输入的场景非常有用，例如注册表单、登录表单等。
- 动态内容加载：Livewire可以在不刷新整个页面的情况下，实时加载和更新页面内容。这对于需要动态加载数据或实时更新页面的场景非常有用，例如聊天应用、实时数据展示等。
- 交互式组件：Livewire的组件化开发方式使得开发者可以轻松构建交互式的用户界面组件。这对于需要复杂交互的场景非常有用，例如购物车、评论系统等。
腾讯云相关产品和产品介绍链接地址：
腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke 腾讯云CDN加速：https://cloud.tencent.com/product/cdn 腾讯云人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub 腾讯云移动推送（TPNS）：https://cloud.tencent.com/product/tpns 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估。
相关·内容
我想使用Laravel Fortify和Livewire来创建一个非常简单的登录表单。我不想使用Jetstream，因为它有更多我不需要的功能和我需要的功能。
我在我的应用程序中使用livewire，并希望在我的登录页面中使用它来提供实时即时验证。
我遇到的问题是，如果我在输入上使用wire:model，我无法提交带有值的表单。
我也不能使用auth()->attempt()，因为它被Fortify劫持了(至少，我是这么认为的。所知道的是，当我使用它时，它返回false)
如何将livewire与fortify一起使用？我需要将数据从livewire组件发送到POST /login。
这
浏览 8提问于2020-11-07得票数 3
下面是我的App/Http/Livewire/Test.php文件
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Test extends Component
{
public $name = 'mike';
public function render(){
return view('livewire.test');
}
public function clickTest(){
$this->n
浏览 4提问于2021-05-30得票数 0
回答已采纳
我正在使用Livewire构建我的Laravel项目，我还在使用Fortify实现安全/身份验证层。 由于各种原因，我没有使用Jetstream。话虽如此，Jetstream显然使用了一些非常有用的功能和技术来完成它的工作，因此本着真正的创造性精神，我“借用”了下面的"update-password“表单作为Jetstream如何使用Livewire与Fortify接口的示例。 这个HTML模板是用于构建表单的实际HTML代码的简化版本，但我去掉了所有样式和标签的复杂性等，这样我们就可以只关注重要的部分： <!-- update-password-form.blade.php
浏览 29提问于2021-08-12得票数 0
我需要我的项目中的livewire包，但以前没有使用过。有些livewire组件在不刷新页面的情况下无法工作，我不明白其中的原因。 <form wire:submit.prevent="login_method">
<input type="text" wire:model="login.email" id="email">
<input type="password" wire:model="login.password" id="passw
浏览 9提问于2021-02-05得票数 0
有3个livewire组件UserIsExpired、UserIsActive和UserIsPending，每个组件分别有3个按钮。当一个按钮被点击时，它应该用它各自的组件替换以前的组件。
<button wire:click="$emit(active)">{{ __('Active') }}</button>
<button wire:click="$emit(pending)">{{ __('Pending') }}</button>
<button wire:click
浏览 6提问于2021-06-03得票数 0
我正尝试在默认的laravel jetstream配置文件视图中添加一个新的配置文件部分。我已经创建了一个名为SetContactPreferences的新livewire组件，并通过添加以下内容从resources/views/profile/show.blade.php调用它： @livewire('profile.set-contact-preferences') 正如预期的那样，我创建的表单在配置文件中显示为新卡。 但是，我不清楚提交操作应该是什么样子。The docs say通知表单将提交当前经过身份验证的用户以及表单输入，因此我在组件中创建了一个方法，如下所示：
浏览 15提问于2021-03-27得票数 1
回答已采纳
我有两个livewire组件 首先，我有一个foreach循环 <ul>
@foreach ($sectors as $sector)
<li>{{ $sector->name }} <input type="submit" wire:click="showParent({{ $sector->id }})" class="btn btn-sm btn-primary" value="Adicionar"> </li>
<u
浏览 20提问于2020-07-03得票数 0
我正在尝试找出如何在Laravel中集成Livewire和spatie/laravel-medialibrary。在这段代码中，我可以在用户提交表单时获取图像信息，但不能用spatie/laravel-medialibrary保存上传的图像 class ProfileComponent extends Component
{
use WithFileUploads;
public $photo;
//...
public function submit()
{
$this->validate($this->rules);
$user = U
浏览 44提问于2021-02-09得票数 0
我有一个livewire表单，我打算提交给外部url。但是，在提交之前，我想以编程方式添加一些用户不能编辑的隐藏输入，然后最终提交表单： <form action="some-external-url" wire:submit.prevent="processForm" method="post">
<x-inputs.text-input wire:model="amount" name="amount" />
<x
浏览 24提问于2021-07-17得票数 0
当我使用php artisan serve时，Livewire工作得很好。 ? 当我使用XAMPP (http://localhost/daily/public/)查看Laravel时，Livewire不工作，当我提交表单时，它会一直提交表单。它不应该因为Livewire而提交。它在php artisan serve中工作得很好。Livewire不工作XAMPP。 ?
浏览 24提问于2020-12-19得票数 3
我在将数据从api响应传递到组件刀片文件时遇到了严重的问题。一开始它装得很好，我一点击就知道了。下拉式会在下面抛出一个错误。
Livewire在尝试水合物化注册组件时遇到损坏的数据.确保Livewire组件的名称、id、数据在请求之间没有被篡改。
我有一个下拉列表，我正在加载职业，一开始加载很好，但是当我从下拉列表中选择什么时，它就会抛出这个错误。
下面是我的组件代码
<?php
namespace App\Http\Livewire;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
us
浏览 0提问于2021-03-08得票数 1
回答已采纳
我使用了一个新的分期付款的拉拉Jetstream与团队和Livewire。一切都如期而至，但是当我尝试用livewire做一些测试时，我会得到这个错误。
1) Tests\Feature\ContactFormTest::contact_form_page_contains_contact_form_livewire
ErrorException: Trying to get property 'id' of non-object (View: /var/www/livewire/resources/views/navigation-dropdown.blade.php) (V
浏览 2提问于2020-09-28得票数 1
回答已采纳
2回答
我正在尝试让收银员使用Livewire，我遇到了一个错误，我必须按提交按钮两次才能得到paymentmethod。
在这个视频中：
我正在尝试dd();以下内容。
dd($this->paymentmethod, $this->cardHolderName, $this->plan->title, $this->plan->stripe_id);
所有内容都在第一次提交时返回，除非提交给$this->paymentmethod，我必须第二次提交表单，以便$this->paymentmethod在dd();中返回
注意:我不会在第二次提交的表格中刷
浏览 6提问于2020-07-20得票数 0
回答已采纳
2回答
我是LiveWire新手，正在尝试用Laravel、jetstream和livewire构建简单的应用程序 我的应用程序从DB中获取数据，并以分页的方式显示在Table中。一切正常，但问题是，当我点击任何页面时，我都会得到URI '?page=2‘ 我不想在Url中看到这个URI，我的刀片也很简单，如下所示 <x-app-layout>
<x-slot name="header">
</x-slot>
<div class="py-2">
浏览 13提问于2021-01-28得票数 0
提交表单时尝试验证数组 <input type="text" class="form-control" wire:model.lazy="data.name" placeholder="name"> //at livewire component class
$data = [
'name' => 'someValue',
'phone' => 'someValue',
'
浏览 18提问于2020-09-22得票数 0
回答已采纳
发送表单后，我将从Ajax中获取数据。有一个侦听器正在将属性设置为。
我试图实现的是在提交表单后显示我的结果。在组件中，模型已被很好地检索，但是当我想将它显示给我的组件时，我会得到一个错误。
directive_manager.js:26 Uncaught (in promise) TypeError: Cannot read property 'getAttributeNames' of null
at _default.value (directive_manager.js:26)
at new _default (directive_manager.js:
浏览 3提问于2020-07-09得票数 1
在我添加了livewire之后
composer require livewire/livewire
创建新的livewire component
php artisan make:livewire search
我一直收到一个错误Undefined type 'Livewire\Component'
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Search extends Component
{
public function render()
{
浏览 9提问于2022-01-02得票数 0
你好，我需要关注ErrorBag的第一个领域，我正在使用Livewire组件表单，因为Livewire发送XHR请求每一个输入更改更新DOM，它将被集中在XHR响应而不提交表单，这不是我需要的，我也在同一项目中使用高山Js，我想用Javascript关注它，但我不知道是否可以观察属性的变化。 function app(){
return {
errorBag: {!! json_encode(array_keys($errors->getMessages())) !!},
focusField()
{
if(this.errorBag.
浏览 26提问于2020-09-08得票数 0
如果我有一个laravel项目 c:\xampp\htdoc\proj -> http://localhost/proj 和公共url c:\xampp\htdoc\projpubl -> http://localhost/projpubl 使用laravel livewire，javascript url是 <script src="/livewire/livewire.js?id=83b555bb..." data-turbo-eval="false" data-turbolinks-eval="false"><
浏览 22提问于2021-09-01得票数 0
回答已采纳
我使用Laravel 8和Livewire，并在我的页面中显示一个Mapbox地图。当我点击地图时，我得到了点击的坐标，并在点击的地方放置了一个标记。到目前为止一切都很顺利。
然后，我要做的是将坐标发送到Livewire组件，以便与其他表单细节一起保存。但是，当我单击地图时，标记很快就会消失；尽管坐标被正确地发出并存储。
map.on('click', function(e){
var coord = e.lngLat;
updateCoords(coord);
addMarker(coord);
浏览 22提问于2022-05-14得票数 0
我开始学习Laravel9livewire。我正在尝试做一个图像上传应用程序。我在Livewire文档中做了确切的例子，但是我得到了一个错误，无法上传图像。当我在我的mac电脑上做同样的应用程序时，它的工作没有任何问题。当我在我的windows电脑上这样做时，它就不起作用了。
ImageUpload.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
class ImegaUpload extends Component
{
use With
浏览 10提问于2022-11-05得票数 2
回答已采纳
1回答
我有表单提交函数，它在普通控制器中工作得很好，但是由于我将函数移到livewire组件，所以它返回错误
错误
ErrorException
Undefined index: attachment
代码
错误行注释
$chat = new BidChat;
// other fields
if ($this->attachment) {
$attachment = $this->attachment;
$filename = 'chat-attachment' . '-' . time() . '.' . $a
浏览 1提问于2020-11-20得票数 0
我遇到了一个问题，当用户在图像上使用裁剪工具移动时，我使用JavaScript填充两个隐藏的输入字段。隐藏的输入由图像将被裁剪的像素填充。我最初的理解是，使用wire.model不能处理由JavaScript更新的隐藏输入字段，因为当我提交表单时，它总是返回null。 <input type="hidden" id="formWidth" name="width" value="width" wire:model.defer="width">
<input type="hidden
浏览 12提问于2020-11-03得票数 0
我有一个向导窗体，它是一个livewire组件，当我键入时，它总是重新呈现。我想在提交表单之前停止重新呈现。 谁能帮我一下？对不起，我的英语不好，我是法国人。
浏览 37提问于2020-07-18得票数 1
回答已采纳
我在Livewire中使用Laravel。我想对js中的事件做出反应。一旦它发出，就会出现一个js警告。问题似乎出在app.js中，因为我有我的js函数。我收到一个错误，Livewire不可用。我使用Laravel Mix编译它，它编译得很好。
Error: Uncaught TypeError: Livewire.on is not a function
app.js：
import Livewire from '../../vendor/livewire/livewire/dist/livewire';
Livewire.on('testEvent', f
浏览 0提问于2021-03-18得票数 2
在https://laravel-livewire.com/docs/2.x/installation上阅读laravel-livewire文档 我尝试发布配置文件，但得到了意外的结果 $ php artisan livewire:publish
Command "livewire:publish" is not defined.
Did you mean one of the
浏览 16提问于2020-10-09得票数 2
回答已采纳
1回答
我正在使用Larave Jetstream livewire，我想修改登录。
从具有初始值为1的隐藏输入字段"is_admin“登录
用户提交登录表单后端检查数据库表字段is_admin =1
表结构:名称、邮箱、密码、is_admin
is_admin =0或1
我想检查is_admin标志，如果提供的凭据与email、password和is_admin=1匹配，则只有用户可以登录。
浏览 7提问于2021-10-23得票数 3
有任何方法可以在livewire中编写代码，如果我提交一个带有按钮的单击命令，那么livewire组件页面呈现甚至是单击的函数都在加载。因为现在我看到在livewire功能加载时没有在livewire页面上加载其他数据。
浏览 1提问于2022-10-24得票数 -1
使用Laravel 8+ Livewire:我遵循了创建动态下拉列表的教程：
我有一个下拉组件：
public $suppliers;
public $beans;
public $selectedSupplier = NULL;
public function mount()
{
$this->suppliers = Supplier::whereHas('greenBeans')->get();
$this->beans = collect();
}
pu
浏览 8提问于2022-01-16得票数 1
我用的是laravel 8 jetstream和livewire。我有一个显示帖子列表的帖子组件，我希望在点击打开一个新的页面上只有该帖子。我已经挂载了该帖子的id，并为它创建了一条路由，但它不工作。有没有人可以贴出一个简单的例子，我已经遵循了下面的教程http://itsolutionstuff.com/post/laravel-8-livewire-crud-with-jetstream-tailwind-cssexample.html
浏览 18提问于2020-10-06得票数 0
2回答
这里是livewire的代码，每当我运行这段代码时，它都不会显示我正在使用laravel 7和livewire来实现这种方法。
控制器
<?php
namespace App\Http\Livewire;
use App\Models\brands;
use Livewire\Component;
class SearchBar extends Component
{
public $searchTerm;
public function render()
{
$searchTerm = '%'.$this->s
浏览 0提问于2021-03-08得票数 0
回答已采纳
我正在建立一个网页内的搜索栏。理想情况下，用户将在搜索字段中输入搜索文本，然后如果找到记录，则搜索结果表将显示并显示找到的记录。我正在使用Laravel Livewire来实现这个功能，然而，我遇到了这样的问题:点击不触发事件，并且需要任何帮助！ 这是我的刀片文件(resources/livewire/dashboard.blade.php)包含搜索栏： <form>
<label for="searchText" class="block text-xx font-medium text-gray-700">Search Us
浏览 11提问于2021-03-25得票数 0
我最近开始研究Laravel Livewire。当我第一次创建Livewire组件时，一切都运行得很好。但是当我尝试创建一个新函数时，事件和函数不再起作用。来自Livewire类的属性/变量可以读取，但我真的不能让函数工作。以下是我的代码 resources/views/livewire/step.blade.php <div>
<button id="sampleBtn" wire:click="increment">+</button>
{{-- Doesn't change v
浏览 8提问于2020-11-28得票数 1
我正在学习livewire，最近还在学习tallstack.dev，以发现它的可能性。
我注意到的一件事是livewire将ping到服务器并同步连接:模型变量与后端。
在某些情况下，比如注册用户时，或者登录时，我们可能没有多少输入字段。
当焦点从输入中移出时，我们可能只使用wire:model.lazy触发到服务器的同步。
这里的主要问题是，不需要将用户在其中一个输入字段上键入的当前值同步/ping到服务器，因为整个表单仍未完成。
因此，每当我点击选项卡或单击“离开”到另一个字段时，它就同步到服务器。
最后，在我点击submit之前，它仍然会最后一次点击服务器，因为它也失去了输入的焦点。
因
浏览 3提问于2020-05-15得票数 2
回答已采纳
我正在用laravel 8和livewire开发一个应用程序。我在视图gestionale.blade.php中创建了具有以下操作的三个组件(表)。
在加载页面时填充第一个表，然后选择一行，第二个表使用单击事件填充，最后通过单击第二个表中的一行填充第三个表。从Livewire文档中，我使用了事件，但我只有第一个事件的正确功能，即单击第一个表填充第二个表，然后单击第二个表中的一个行，我什么也没有得到。我在代码中输入了一个转储&死，只是不能在第二个表中引发事件。
这是我的密码：
<?php
namespace App\Http\Livewire;
use Livewire\Com
浏览 0提问于2021-04-06得票数 0
我想知道如何检查Laravel Livewire的版本。我计划更新Livewire，并想检查当前版本。
浏览 20提问于2021-08-19得票数 0
回答已采纳
文件夹结构： Livewire
- Things
- Addthing.php 刀片文件 @livewire('things.addthing') 找不到它：Unable to find component: [things.addthing] 如果没有子目录，它可以很好地工作： Livewire
- Addthing.php 。 @livewire('addthing') 如何让Livewire组件在子目录中工作？
浏览 20提问于2020-11-23得票数 1
我已经创建了一个包含以下内容的livewire组件头像：
use Livewire\Component;
use Livewire\WithFileUploads;
class Avatar extends Component
{
use WithFileUploads;
/**
* @var \Livewire\TemporaryUploadedFile
*/
public $photo;
public function updated()
{
$this->validate([
浏览 0提问于2020-10-20得票数 1
我正试图提交一份使用laravel livewire的联系人表格，例如：
public $name;
public $email;
public $phone;
public $message;
public function submitForm()
{
$attributes['name'] = $this->name;
$attributes['email'] = $this->email;
$attributes['phone'] = $this->phone;
$attributes
浏览 4提问于2022-04-06得票数 0
我用的是Laravel 8和Livewire。我的Livewire应用程序URL类似于http://localhost/myproject。
我的Livewire管理面板url就像http://localhost/myproject/admin。
我正在取锚标签的问题。当我在分页中更改页面时，Livewire中的View按钮URL会自动添加公共。
“视图”按钮代码如下：
<a href="{{route('manage-product',$resdata->id)}}" class="btn btn-primary">View&
浏览 0提问于2021-01-07得票数 0
1回答
嘿，所有聪明的人，我需要一些帮助与一些livewire，我正在向我的组件中的外部API的请求，我想显示在刀片上，但它只是保持超时，所以想知道是否有人可以帮助我，我的脚本是下面和我有一个ddd的例子，在它渲染的视图和超时...
<?php
namespace App\Http\Livewire;
use Illuminate\Support\Facades\Http;
use Livewire\Component;
class Users extends Component
{
public $users;
public function render()
浏览 15提问于2021-02-17得票数 0
我有一个livewire组件，需要使用JWT发送请求。
由于livewire GET请求在默认情况下不发送令牌，所以我决定修改Laravel的身份验证中间件，以便通过Laravel中间件中的承载发送我在livewire组件中设置的会话中的令牌。
当我试图在身份验证中间件中检索该变量时，我添加到我的livewire组件中的会话中的变量返回NULL。
1.带电组件
<?php
namespace App\Http\Livewire;
class HelloWorld extends Component
{
public function mount(TransactionCheck
浏览 2提问于2021-04-26得票数 0
使用dropdown(select input)和依赖非常简单的livewire。 我们有两个型号。州和城市 如果我们希望当用户选择了状态下拉菜单时，会显示城市下拉菜单，用户可以选择城市，而无需使用ajax或java脚本，只需在laravel 8中使用livewire即可。 在您的laravel项目中安装livewire composer require livewire/livewire 创建组件(示例名称计数器) php artisan make:livewire counter 运行此命令将生成以下两个文件： app/Http/Livewire/Http.php resources/v
浏览 12提问于2021-09-21得票数 0
1回答
我将从livewire函数传递一个日期到该模式，并将其放在输入字段中，如下所示：
<input wire:model.defer="state.schedule_date" value="{{$startDate}}" type="hidden">
然后，将表单提交给livewire函数。
public function addScheduleRoute()
{
$out = new ConsoleOutput();
$out->writeln("YOU ARE IN HERE");
$
浏览 5提问于2022-02-19得票数 0
我已经开始使用livewire，但是我不能使用wire:click加载表单，无论是在创建模式还是编辑模式下，但当我单击时，我得到的只是某种模式和404错误
这是livewire组件
namespace App\Http\Livewire;
use Livewire\Component;
class Activities extends Component
{
public $view = 'none';
public function render()
{
return view('livewire.activities&#
浏览 0提问于2021-02-04得票数 4
我正在工作，有幼虫-生活钢丝。在我的项目路线中是不工作的。
这里是路由列表..
<?php
use App\Http\Livewire\HomeComponent;
use App\Http\Livewire\ShopComponent;
use App\Http\Livewire\CartComponent;
use App\Http\Livewire\CheckoutComponent;
use Illuminate\Support\Facades\Route;
Route::get('/',HomeComponent::class);
Route::get(&
浏览 2提问于2021-05-26得票数 0
当我设置datatable时，不管我使用的对象是什么，我最终都会尝试加载它，并最终超时。我甚至不知道如何开始调试这个。
我在这里学习了一些示例：和简单数据表，如：
<livewire:datatable model="App\User" exclude="planet_id, bio, latitude, longitude, updated_at" />
完美地工作。我遇到的问题是，当我尝试任何需要它自己的Datatable类的东西时。
我的步骤/代码如下：
php artisan livewire:make jobs-data-table
job
浏览 3提问于2021-10-07得票数 0
回答已采纳
我在Laravel 8 Jetstream Livewire上激活了SPA模式，当我从其他页面点击user/profile端点时，我发现name和email都是空的，当我刷新浏览器时，它会显示name和email。
浏览 4提问于2020-11-18得票数 1
我的问题是，我有一个包含帐户的表，最后一列是一个livewire组件。目前，我可以点击外部，它不隐藏。组件本身意味着在登录时(使用jetstream)是Manage下拉列表的克隆。
我的代码: resources/views/livewire/account-menu-component.blade.php
<div>
<div class=" focus:outline-none focus:border-gray-300 transition hamburger" wire:click="$toggle('showDiv')
浏览 2提问于2021-12-14得票数 0
在Laravel 8/ livewire 2.5 / alpinejs 3应用程序中，我使用了"te7a-houdini/laravel-trix"："^2.0.5"，这是的翘曲，我发现在livewire刀片模板中具有：
<div class="p-2 w-full">
<div class="body-content" wire:ignore>
<trix-editor
class="trix-content"
浏览 14提问于2021-10-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
