【问题标题】:Livewire mount suddenly stop receiving parametersLivewire mount突然停止接收参数
【发布时间】:2021-06-08 03:25:39
【问题描述】:

我有一个通过路由模型绑定显示模型的 livewire 组件,它正在工作,但突然收到以下错误:

Livewire\LivewireManager::mount() 函数的参数太少,传入 0

以下是我的代码示例:

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组件类

<?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');
    }
}

复制步骤

  1. 在 web.php 上添加路由

  2. php artisan make:livewire Admin\AdminIntroSectionShow

  3. 一个名为“IntroSection”的模型,具有以下属性:

    'title' => (字符串), '描述' => (文本), '链接' => (字符串), 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>

【问题讨论】:

    标签: php laravel laravel-8 laravel-livewire


    【解决方案1】:

    将我的所有更改还原到添加进度条之前。罪魁祸首似乎是我从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>
    

    【讨论】:

      猜你喜欢
      • 2022-11-25
      • 1970-01-01
      • 2013-11-29
      • 2018-08-18
      • 1970-01-01
      • 1970-01-01
      • 2021-03-20
      • 2013-05-27
      • 1970-01-01
      相关资源
      最近更新 更多