Livewire 挂载突然停止接收参数
Livewire mount suddenly stop receiving parameters
我有一个通过路由模型绑定显示模型的 livewire 组件,它工作正常但突然收到以下错误:
Too few arguments to function Livewire\LivewireManager::mount(), 0 passed in
以下是我的代码示例:
路线 web.php
Route::middleware(['auth:sanctum', 'verified'])->group(function() {
Route::get('/admin/intro-section', \App\Http\Livewire\Admin\AdminIntroSection::class)->name('admin.intro-section.index');
Route::get('/admin/intro-section/{id}', \App\Http\Livewire\Admin\AdminIntroSectionShow::class)->name('admin.intro-section.show');
});
Livewire\Admin\
中的 Livewire 组件 class
<?php
namespace App\Http\Livewire\Admin;
use Livewire\Component;
use App\Models\IntroSection;
use Illuminate\Support\Collection;
use Livewire\WithFileUploads;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class AdminIntroSectionShow extends Component
{
use WithFileUploads;
public IntroSection $introSection;
public $photo;
protected $rules = [
'introSection.title' => 'string',
'introSection.description' => 'string',
'introSection.link' => 'string',
'introSection.img_link' => 'string',
'photo' => 'nullable|image|max:2000',
];
public function update(IntroSection $introSection, Request $request)
{
$this->validate();
if ($this->photo) {
$filename = $this->photo->store('img', 'public');
$this->introSection->img_link = $filename;
}
$this->introSection->save();
}
public function mount($id)
{
$this->introSection = IntroSection::where('id', $id)->with(['details'])->first();
}
public function render()
{
return view('livewire.admin.intro-section-show');
}
}
重现步骤
在 web.php
添加路线
php artisan make:livewire Admin\AdminIntroSectionShow
名为“IntroSection”的模型具有以下属性:
'title' => (字符串),
'description' => (文本),
'link' => (字符串),
img_link' => (字符串)
您使用的是最新版本的 Livewire:是
代码最后一次运行是在我完成文件上传部分之前。之后,我测试了有效的文件上传。满意后重新加载了页面,但是现在mount好像不喜欢了
关于如何解决这个问题有什么想法吗?我尝试删除更新功能,将 IntroSection $introsection 传递给 mount 而不是 $id。就我而言,livewire 组件似乎没有什么是微不足道的,但无论如何:
<div>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Intro Section') }}
</h2>
</x-slot>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<section class="relative container mx-auto px-4">
<div class="p-4 bg-white shadow-md rounded-lg">
<form wire:submit.prevent="update" class="md:grid md:grid-cols-2 md:gap-6">
<div class="md:col-span-1">
<div class="mb-4">
<label class="border-b-2 border-blue-500">Title</label>
<div class="text-lg font-medium mt-2">{{ $introSection->title }}</div>
<input type="text" name="title" wire:model="introSection.title">
@error('title') {{ $message }} @enderror
</div>
<div class="mb-4">
<label class="border-b-2 border-blue-500">Link</label>
<div class="text-lg font-medium mt-2">{{ $introSection->link }}</div>
<input type="text" name="link" wire:model="introSection.link">
@error('link') {{ $message }} @enderror
</div>
<div class="mb-4">
<label class="border-b-2 border-blue-500">Image</label>
@if ($introSection->img_link)
<img src="{{ asset($introSection->img_link) }}" class="h-24 block mt-2">
@endif
@if ($photo)
<img src="{{ $photo->temporaryUrl() }}" class="block mt-2">
@endif
<div
x-data="{ progress: 0, uploading: false }"
@livewire-upload-start="uploading = true"
@livewire-upload-finish="uploading = false"
@livewire-upload-error="uploading = false"
@livewire-upload-progress="progress = $event.detail.progress">
<input type="file" name="img_link" wire:model="photo" class="block mt-2">
<progress max="100" x-bind:value="progress" x-show="uploading"></progress>
</div>
@error('photo')
{{ $message }}
@enderror
</div>
</div>
<div class="md:col-span-1">
<div class="mb-4">
<label class="border-b-2 border-blue-500">Description</label>
<div class="text-lg font-medium mt-2">{{ $introSection->description }}</div>
<textarea rows="5" cols="50" name="description" wire:model="introSection.description"></textarea>
@error('description') {{ $message }} @enderror
</div>
</div>
<div class="md:col-span-1">
<button class="px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-500 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150">Save</button>
</div>
</form>
</div>
</section>
</div>
</div>
还原了添加进度条之前的所有更改。罪魁祸首似乎是我从 Livewire Added File Upload Support:
复制的以下代码块
<div
x-data="{ progress: 0, uploading: false }"
@livewire-upload-start="uploading = true"
@livewire-upload-finish="uploading = false"
@livewire-upload-error="uploading = false"
@livewire-upload-progress="progress = $event.detail.progress">
<input type="file" name="img_link" wire:model="photo" class="block mt-2">
<progress max="100" x-bind:value="progress" x-show="uploading"></progress>
</div>
我在使用 Alpinejs 但同时使用了 @livewire 指令导致了错误。
我从 https://laravel-livewire.com/docs/2.x/file-uploads#js-hooks:
获得的更新代码
<div
x-data="{ isUploading: false, progress: 0 }"
x-on:livewire-upload-start="isUploading = true"
x-on:livewire-upload-finish="isUploading = false"
x-on:livewire-upload-error="isUploading = false"
x-on:livewire-upload-progress="progress = $event.detail.progress"
>
<input type="file" name="img_link" wire:model="photo" class="block mt-2">
<div x-show="isUploading">
<progress max="100" x-bind:value="progress"></progress>
</div>
</div>
我有一个通过路由模型绑定显示模型的 livewire 组件,它工作正常但突然收到以下错误:
Too few arguments to function Livewire\LivewireManager::mount(), 0 passed in
以下是我的代码示例:
路线 web.php
Route::middleware(['auth:sanctum', 'verified'])->group(function() {
Route::get('/admin/intro-section', \App\Http\Livewire\Admin\AdminIntroSection::class)->name('admin.intro-section.index');
Route::get('/admin/intro-section/{id}', \App\Http\Livewire\Admin\AdminIntroSectionShow::class)->name('admin.intro-section.show');
});
Livewire\Admin\
<?php
namespace App\Http\Livewire\Admin;
use Livewire\Component;
use App\Models\IntroSection;
use Illuminate\Support\Collection;
use Livewire\WithFileUploads;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class AdminIntroSectionShow extends Component
{
use WithFileUploads;
public IntroSection $introSection;
public $photo;
protected $rules = [
'introSection.title' => 'string',
'introSection.description' => 'string',
'introSection.link' => 'string',
'introSection.img_link' => 'string',
'photo' => 'nullable|image|max:2000',
];
public function update(IntroSection $introSection, Request $request)
{
$this->validate();
if ($this->photo) {
$filename = $this->photo->store('img', 'public');
$this->introSection->img_link = $filename;
}
$this->introSection->save();
}
public function mount($id)
{
$this->introSection = IntroSection::where('id', $id)->with(['details'])->first();
}
public function render()
{
return view('livewire.admin.intro-section-show');
}
}
重现步骤
在 web.php
添加路线php artisan make:livewire Admin\AdminIntroSectionShow
名为“IntroSection”的模型具有以下属性:
'title' => (字符串), 'description' => (文本), 'link' => (字符串), img_link' => (字符串)
您使用的是最新版本的 Livewire:是
代码最后一次运行是在我完成文件上传部分之前。之后,我测试了有效的文件上传。满意后重新加载了页面,但是现在mount好像不喜欢了
关于如何解决这个问题有什么想法吗?我尝试删除更新功能,将 IntroSection $introsection 传递给 mount 而不是 $id。就我而言,livewire 组件似乎没有什么是微不足道的,但无论如何:
<div>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Intro Section') }}
</h2>
</x-slot>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<section class="relative container mx-auto px-4">
<div class="p-4 bg-white shadow-md rounded-lg">
<form wire:submit.prevent="update" class="md:grid md:grid-cols-2 md:gap-6">
<div class="md:col-span-1">
<div class="mb-4">
<label class="border-b-2 border-blue-500">Title</label>
<div class="text-lg font-medium mt-2">{{ $introSection->title }}</div>
<input type="text" name="title" wire:model="introSection.title">
@error('title') {{ $message }} @enderror
</div>
<div class="mb-4">
<label class="border-b-2 border-blue-500">Link</label>
<div class="text-lg font-medium mt-2">{{ $introSection->link }}</div>
<input type="text" name="link" wire:model="introSection.link">
@error('link') {{ $message }} @enderror
</div>
<div class="mb-4">
<label class="border-b-2 border-blue-500">Image</label>
@if ($introSection->img_link)
<img src="{{ asset($introSection->img_link) }}" class="h-24 block mt-2">
@endif
@if ($photo)
<img src="{{ $photo->temporaryUrl() }}" class="block mt-2">
@endif
<div
x-data="{ progress: 0, uploading: false }"
@livewire-upload-start="uploading = true"
@livewire-upload-finish="uploading = false"
@livewire-upload-error="uploading = false"
@livewire-upload-progress="progress = $event.detail.progress">
<input type="file" name="img_link" wire:model="photo" class="block mt-2">
<progress max="100" x-bind:value="progress" x-show="uploading"></progress>
</div>
@error('photo')
{{ $message }}
@enderror
</div>
</div>
<div class="md:col-span-1">
<div class="mb-4">
<label class="border-b-2 border-blue-500">Description</label>
<div class="text-lg font-medium mt-2">{{ $introSection->description }}</div>
<textarea rows="5" cols="50" name="description" wire:model="introSection.description"></textarea>
@error('description') {{ $message }} @enderror
</div>
</div>
<div class="md:col-span-1">
<button class="px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-500 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:shadow-outline-gray disabled:opacity-25 transition ease-in-out duration-150">Save</button>
</div>
</form>
</div>
</section>
</div>
</div>
还原了添加进度条之前的所有更改。罪魁祸首似乎是我从 Livewire Added File Upload Support:
复制的以下代码块<div
x-data="{ progress: 0, uploading: false }"
@livewire-upload-start="uploading = true"
@livewire-upload-finish="uploading = false"
@livewire-upload-error="uploading = false"
@livewire-upload-progress="progress = $event.detail.progress">
<input type="file" name="img_link" wire:model="photo" class="block mt-2">
<progress max="100" x-bind:value="progress" x-show="uploading"></progress>
</div>
我在使用 Alpinejs 但同时使用了 @livewire 指令导致了错误。
我从 https://laravel-livewire.com/docs/2.x/file-uploads#js-hooks:
获得的更新代码<div
x-data="{ isUploading: false, progress: 0 }"
x-on:livewire-upload-start="isUploading = true"
x-on:livewire-upload-finish="isUploading = false"
x-on:livewire-upload-error="isUploading = false"
x-on:livewire-upload-progress="progress = $event.detail.progress"
>
<input type="file" name="img_link" wire:model="photo" class="block mt-2">
<div x-show="isUploading">
<progress max="100" x-bind:value="progress"></progress>
</div>
</div>