Alpine表达式错误：无法读取undefined的'name'属性（Livewire上传问题）

在使用Livewire组件上传图片时，触发了Alpine Expression Error: Cannot read properties of undefined (reading 'name')错误，按照教程操作仍未解决，相关代码及错误信息如下：

相关代码文件 #

1. logo-upload.blade.php（Livewire视图） #

<div>
    <input type="file" class="file-input file-input-bordered file-input-primary file-input-xs w-full max-w-xs" wire:model="logo"/>
    <button wire:click="upload" class="btn btn-primary btn-xs">Upload</button>
</div>

2. LogoUpload.php（Livewire控制器） #

<?php

namespace App\Livewire;

use App\Models\Agency;
use Illuminate\Support\Facades\Storage;
use Livewire\Component;
use Livewire\WithFileUploads;

class LogoUpload extends Component
{
    use WithFileUploads;
    public $logo;
    public $agency;

    public function upload()
    {
        dd($this->logo);
//        $this->validate(['logo' => 'image|max:5120']);
//
//        $agency = Agency::find($this->agency); // Busca o agencia pelo id
//        $image = $this->logo;
//        $filename = time() . '.' . $image->getClientOriginalExtension();
//        $path = $image->storeAs($agency->cnpj, $filename, 's3');
//        $agency->logo = $filename;
//        $agency->url = Storage::disk('s3')->url($path);
//        $agency->save();
    }


    public function render()
    {
        return view('livewire.logo-upload');
    }
}

3. index.blade.php（调用Livewire的视图） #

<div class="w-1/3 p-4 sm:rounded-lg">
    <h3 class="text-3xl font-bold text-gray-800 dark:text-white">Logotipo</h3>
    <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
    @if($agency->logotipo)
        <div class="card w-96 bg-base-100 shadow-xl image-full">
            <figure>< <img src="{{ $agency->logotipo }}" alt="{{ $agency->nome.'logotipo' }}"></figure>
            <div class="card-body">
                <h2 class="card-title">Shoes!</h2>
                <p>If a dog chews shoes whose shoes does he choose?</p>
                <div class="card-actions justify-end">
                    <button class="btn btn-primary">Buy Now</button>
                </div>
            </div>
        </div>
    @else
        <svg class="w-60 h-60 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
            <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
        </svg>
        @livewire('logo-upload', ['agency_id' => $agency->id])
    @endif
</div>

控制台错误截图 #

解决方案 #

• 修正组件参数接收逻辑：
  调用组件时传入的参数是agency_id，但组件类中定义的接收属性是public $agency，需添加mount方法来正确接收参数：

  public function mount($agency_id)
  {
      $this->agency = $agency_id;
  }
  

  或者直接将组件类中的public $agency改为public $agency_id，并在upload方法中使用$this->agency_id查询Agency模型。

• 修复DOM语法错误：
  index.blade.php中<figure>标签内多了一个多余的<符号，导致DOM解析异常进而影响Alpine.js运行，修正后的代码：

  <figure><img src="{{ $agency->logotipo }}" alt="{{ $agency->nome.'logotipo' }}"></figure>
  

• 检查版本兼容性：
  确认Livewire与Alpine.js版本匹配，例如Livewire 3需要搭配Alpine 3.x版本使用，版本不兼容可能引发此类表达式错误。

内容的提问来源于stack exchange，提问作者Marcello Pato