- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想用 laravel livewire 做一个 SPA,我想使用 wire:click 来触发组件中的一个功能,但它不起作用,如果代码困惑这是我第一次在这里发布并且我不确定要发布什么,请原谅这是我的代码来解决这些问题谢谢
主 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;
}
}
<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
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');
}
}
}
<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}}' alt="" 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>
<?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
}
最佳答案
所有 HTML 代码都应该用单个 <div>.
覆盖然后它将起作用。
关于javascript - laravel Livewire 电线 :click not firing the function,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64089344/
我试图创建 Kindle Fire 模拟器来测试 Kindle Fire 平板电脑、Fire 手机和亚马逊电视的应用程序。我已经按照文档进行操作,但无法为这些创建模拟器。谁能告诉我亚马逊是否支持模拟器
以下代码运行大约需要 20 秒。然而,取消注释 do! 后只用了不到一秒的时间。为什么会有这么大的差异? 更新:使用ag.Add时需要9秒。我已经更新了代码。 open FSharpx.Control
我曾经将图像保存到 fire base storage 它在所有 android 设备上工作但在 amazon fire 上,它抛出错误。 这是日志 W/GooglePlayServicesUtil:
我想为 Fire TV 应用程序进行 Google 登录。不幸的是,我不能为此使用 Google Play 服务,所以我需要解决这个问题。我唯一能想到的就是让登录屏幕成为 uiwebview Goog
我们有 Gem Fire 6 数据,想将其迁移到 Gem Fire 8 数据。为此有哪些可能的选择?我们需要这个,因为我们的客户可能不乐意丢失 Gem Fire 6 服务器中的数据。请指教。 最佳答案
我是 Quartz 的新手,一直在重复作业运行。它们是由两个触发时间重叠的触发器引起的。 是否有任何 Quartz 的“开箱即用”功能可以防止重复触发具有多个附加触发器的同一作业? 或者也许有一些第三
我一直在尝试测试事件,昨天我让它工作了。那是在我开始重构测试代码以防止它过于重复之前。我添加了 setUp 方法调用以使用 ModelFactories 生成假数据。这是昨天在每个测试用例中完成的,并
我想在我关注文本区域之前触发一个事件(即在键盘出现在 iOS 上之前)。 这可能吗? 我处理焦点的代码在这里: $(document).on('focus', 'textarea', function
我使用 HTML5 和 JavaScript 开发了 Fire TV 应用程序。这里我需要识别当前访问的设备是什么。 Amazon Fire TV 或 Amazon Fire Stick。 如何使用
Angular 版本: @angular-devkit/architect 0.803.22 @angular-devkit/build-angular 0.803.22 @a
python包Fire对于从命令行启动 python 脚本非常有用。一件常见的事情是有由多个单词组成的参数,例如可以用 3 种通用方式编写的 cat 的名称: nameofcat name_of_ca
我正在尝试使用 javascript 检测我的网站是否在 kindle fire 移动设备上运行。我试过使用 navigator.userAgent 和 navigator.appVersion 但我
hi This : var fees=document.getElementById("conn"); var btn=document.getE
我在网上查过,但找不到任何东西: 如何摆脱在我正在观看的电影上显示的这个通知圈? 最佳答案 这个东西来自 ES 文件浏览器 只需进入此应用程序 > 设置 然后有一个选项说记录 float 窗口,你只需
我需要知道当用户通过新的 Fullscreen API 进入全屏模式时会触发哪些(DOM)事件。我尝试了这个片段,但它没有触发: jQuery('body').on('fullScreenChange
我试图通过在加载页面时隐藏 webView 来在不同网页的加载之间进行转换。但是,我发现一些图像密集型网站导致 webViewDidFinishLoading 过早触发,当我在此时显示 webView
我的应用程序使用 MVVM 模式。我的 TextBox绑定(bind)到我的 ViewModel 的属性(类型字符串)。 何时 TextBox 的内容通过用户输入更改,我想执行一些验证。 所以,目前,
有谁知道如何检测该应用程序是否在Kindle Fire上运行? 如果在Kindle Fire上运行,我的应用程序需要关闭一些功能,并且我想使用与Google Marketplace相同的版本。 最佳答
如何告诉 jQuery 仅触发一次回调函数? $(document).on('ready turbolinks:load', function callback_function() { co
使用新的HTML音频标签: Your browser does not support the audio element. 在我尝试过的所有浏览器(IE v10,Chrome v23,O
我是一名优秀的程序员,十分优秀!