laravel Livewire 电线:点击不触发功能
Posted
技术标签:
【中文标题】laravel Livewire 电线:点击不触发功能【英文标题】:laravel Livewire wire:click not firing the function 【发布时间】:2021-01-13 06:41:02 【问题描述】:我想用 laravel livewire 做一个 SPA,我想使用 wire:click 来触发组件中的一个功能,但它不起作用,如果代码混乱,请原谅我第一次在这里发布,我不确定在这里发布我的代码以解决这些问题,谢谢
main.blade.php
@section('content')
<div>
<div class="row justify-content-center">
<div class="col-12">
<div class="card my-3">
<!-- header -->
<div class="card-header d-inline-flex">
<h3 class='mr-2'>Categories</h3>
<div>
<a href="javascript:void(0);" wire:click='createCategory' class="btn btn-success ">Add NewCategory</a>
</div>
</div><!-- header -->
<div class="card-body">
<!-- alerts -->
@include('admin.includes.alerts.errors')
@include('admin.includes.alerts.success')
<!-- alerts -->
<!-- if True , create form will show , if not will stay disabled -->
@if ($showCreateForm)
@livewire('admin.category.create' )
@endif
<!-- if True , create form will show , if not will stay disabled -->
<!-- Table -->
<div class="table-responsive">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Parent</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($categories as $category)
<tr>
<td>$category->id</td>
-- <td>storage_path(app\livewire-tmp\$category->image)" /></td> --
<td>$category->name</td>
<td>$category->slug</td>
<td class=" $category->isActive()==='Active'? 'text-success':'text-danger'">
$category->isActive()</td>
<td> !empty($category->parent) ? $category->parent->name:'' </td>
<td>
<a href="" class="btn btn-warning">Edit</a>
<a href="" class="btn btn-danger">Delete</a>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
<th>Slug</th>
<th>Status</th>
<th>Parent</th>
<th>Action</th>
</tr>
</tfoot>
</table>
<div>
!!$categories->links()!!
</div>
</div>
<!-- Table -->
</div><!-- body -->
</div>
</div>
</div>
</div>
@endsection
和组件 Main.php ,
<?php
namespace App\Http\Livewire\Admin\Category;
use App\Models\Admin\Category;
use Livewire\Component;
use Livewire\WithPagination;
class Main extends Component
use WithPagination;
protected $categories;
public $showCreateForm = false;
public $showEditForm = false;
public function render()
$categories = Category::orderBy('id','desc')->paginate(12);
return view('livewire.admin.category.main',[
'categories' => $categories,
]) ->layout('layouts.admin');
public function createCategory()
$this->showCreateForm = !$this->showCreateForm;
public function update_Category($id)
$categories = Category::whereId($id);
if ($categories)
$this->emit('getCategoryid' , $categories);
$this->showEditForm = !$this->showEditForm;
$this->showCreateForm = false;
public function delete_Category($id)
$this->showCreateForm = !$this->showCreateForm;
//// 更新 ////
我尝试了 iRestWeb 答案,我认为它是正确的答案,但我什至不明白它 100% 与 javascript 相关的发生了什么,这不是我的专业领域,所以这是我的完整代码,希望有人能理解,再次抱歉,如果我的代码乱七八糟,麻烦你了,谢谢。
create.blade.php
<div>
<form role="form" wire:submit.prevent="create" method="POST" enctype="multipart/form-data">
@csrf
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">Parent</label>
<select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
<option selected value> -- select an option -- </option>
-- @if (is_array($categories) || is_object($categories) || !empty($categories)) -- @foreach ($categories as $category)
<option value="$category->id">$category->name</option>
@endforeach -- @endif --
</select>
</div>
</div>
<!-- 1 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Category Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" name="name"> @error('name') <span class="error text-danger"> $message </span> @enderror
</div>
</div>
<!-- 2 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Slug Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug"> @error('slug') <span class="error text-danger"> $message </span> @enderror
</div>
</div>
<!-- 3 -->
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlFile1">Image</label>
<input type="file" wire:model="image" class="form-control-file" id="exampleFormControlFile1" name="image"> @error('image') <span class="error text-danger"> $message </span> @enderror
</div>
</div>
<!-- 4 -->
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
<label class="form-check-label" for="exampleCheck1">is Active</label> @error('is_active') <span class="error text-danger"> $message </span> @enderror
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
创建.php
<?php
namespace App\Http\Livewire\Admin\Category;
use Livewire\Component;
use App\Models\Admin\Category;
use Livewire\WithFileUploads;
use Illuminate\Support\Str;
use Livewire\WithPagination;
use Intervention\Image\Facades\Image;
class Create extends Component
use WithFileUploads;
use WithPagination;
public $slug , $name , $image , $parent_id , $is_active;
protected $rules = [
'slug' => 'required|unique:categories,slug',
'name' => 'required',
'image'=> 'nullable|image|max:1024'
];
protected $categories;
public function render()
$categories = Category::orderBy('id','desc')->paginate(12);
return view('livewire.admin.category.create' , [
'categories' => $categories,
]);
public function create()
$this->validate();
$data = [
'name' => $this->name,
'slug' => $this->slug,
'is_active'=> $this->is_active,
'image'=> $this->image,
'parent_id'=> $this->parent_id,
];
//image upload
try
if ($image = $this->image)
$filename = Str::slug($this->name).'.'.$image->getClientOriginalExtension();
$path = public_path('assets/image/'.$filename);
Image::make($image->getRealPath())->save($path,100);
Category::create($data);
$this->reset();
return $this->addError('success' , 'Created Successfuly');
catch (\Throwable $th)
return $this->addError('error', 'Something Wrong Happens');
edit.blade.php
<div>
<form role="form" method="POST" enctype="multipart/form-data" wire:submit.prevent="update">
@csrf
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleInputEmail1">Parent</label>
<select type="select" class="form-control" id="exampleInputEmail1" wire:model="parent_id" name="parent_id">
<option></option>
-- @if (is_array($categories) || is_object($categories) || !empty($categories)) -- @foreach ($categories as $category)
<option value="$category->id">$category->name</option>
@endforeach -- @endif --
</select>
</div>
</div>
<!-- 1 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Category Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="name" value='$category->name' name="name"> @error('name') <span class="error text-danger"> $message </span> @enderror
</div>
</div>
<!-- 2 -->
<div class="col-6">
<div class="form-group">
<label for="exampleInputPassword1">Slug Name</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Name" wire:model="slug" name="slug" value='$category->slug'> @error('slug') <span class="error text-danger"> $message </span> @enderror
</div>
</div>
<!-- 3 -->
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlFile1">Image</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" name="image">
<img value='$category->image' srcset=""> @error('image') <span class="error text-danger"> $message </span> @enderror
</div>
</div>
<!-- 4 -->
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" wire:model="is_active" name="is_active">
<label class="form-check-label" for="exampleCheck1">is Active</label> @error('is_active') <span class="error text-danger"> $message </span> @enderror
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Edit.php(未完成的任务)
<?php
namespace App\Http\Livewire\Admin\Category;
use Livewire\Component;
use App\Models\Admin\Category;
class Edit extends Component
protected $categories , $cat_id;
public $slug , $name , $image , $old_image , $parent_id , $is_active;
protected $listeners = ['getCategoryid'=>'getID'];
public function mount()
$this->categories = Category::whereId($this->cat_id)->first();
//mout
public function render()
$categories = Category::all();
return view('livewire.admin.category.edit' , [
'categories' => $categories,
]);
//render
public function update($id)
//update
public function getID($categories)
$this->categories = $categories;
// Data
$this->slug = $this->$categories['slug'];
$this->name = $this->$categories['name'];
$this->image = $this->$categories['image'];
$this->old_image = $this->$categories['old_image'];
$this->parent_id = $this->$categories['parent_id'];
$this->is_active = $this->$categories['is_active'];
//getID
【问题讨论】:
欢迎使用,不工作是什么意思,请详细说明正在显示的错误 卡头中的链接应该去运行 Main.php 组件中的函数,所以当我点击它时它不会做任何事情 你的控制台有错误吗? 网络没有任何反应,控制台也没有错误 检查网络标签,它发送任何东西吗? 【参考方案1】:所有的 html 代码都应该用单个 <div>.
覆盖,这样它就可以工作了。
【讨论】:
你成就了我的一天!谢谢 完美运行,这是在文档中的某个地方吗? 哇,这也解决了我的问题 - 谢谢 兄弟,这是我一生中遇到的最愚蠢的问题,谢谢。 我浪费了几个小时试图让我的代码正常工作,这一切都是因为我在顶部放了一个。令人难以置信的是,这样一个基本错误没有给出原因的线索,它只是完全禁用了 Livewire,没有任何消息。
【参考方案2】:在base.blade.php文件中添加liveWire的css和js就可以了:
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
【讨论】:
【参考方案3】:您不需要:click
事件来执行此操作,您可以简单地使用:
wire:$toggle('property')
而且你不需要使用a
标签;你可以简单地使用button
标签。所以你的按钮代码将如下所示:
<button type="button" wire:$toggle='showCreateForm' class="btn btn-success">Add New Category</button>
【讨论】:
感谢您的回复,我会尝试并确认它是否有效 它不起作用,伙计,我认为它的 javascript 是因为它根本不像禁用链接那样响应它很奇怪很奇怪 你是否包含了 livewire 的 css & js ?请提供页面的完整代码,包括布局页面【参考方案4】:我想这会对你有所帮助
<a href="#" wire:click.prevent="$toggle('showCreateForm')" class="btn btn-success">Add New Category</a>
【讨论】:
以上是关于laravel Livewire 电线:点击不触发功能的主要内容,如果未能解决你的问题,请参考以下文章
Laravel 与 JetStream 和 LiveWire 不渲染(尾风)