Livewire：嵌套组件正在调用父类而不是子类的属性答案

【问题标题】：Livewire: nested component is calling property on parent class instead of child classLivewire：嵌套组件正在调用父类而不是子类的属性
【发布时间】：2021-10-23 20:48:09
【问题描述】：

我目前正在开发 Laravel 应用程序的一部分，该应用程序可以跟踪书籍的阅读进度。我正在使用 Livewire 并有两个组件。主要组件是 BookManager 类，当更新或删除图书时，它会显示所有图书和更新。

class BookManager extends Component
{
    public $name;
    public $books;

    protected $listeners = ['refreshBookManager' => '$render'];
    
    public function mount()
    {
        $this->books = Book::all();

    }
    
    public function render()
    {
        return view('livewire.book-manager');
    }
    
}

它遍历刀片文件中的所有书籍并为每本书呈现一个 BookField 组件。

// livewire/book-manager.blade.php
<div>
    <table class="table table-striped">
        @foreach($books as $book)
            <livewire:book-field :book="$book" :key="$book->id" />
        @endforeach
    </table>
</div>

我认为每个 BookField 组件都可以跟踪自己的书，因此用户可以在这里单独更新每本书的进度或将书标记为已完成。

class BookField extends Component
{
    public $pages_read;
    public Book $book;

    public function render()
    {
        return view('livewire.book-field');
    }

    public function update()
    {
        //...
    }

    public function finish()
    {
        //...
    }

}

// livewire/book-field.blade.php
<div>
    <tr>
        <td>
            {{$book->name}}
        </td>
        <td>
            <progress value="{{ ($book->pages_read / $book->pages_total) * 100 }}" max="100"></progress>
        </td>
        <td>
            <input class="form-control" type="number" wire:model.defer="pages_read" placeholder="{{$book->pages_read}}">
        </td>
        <td>
            / {{$book->pages_total}}
        </td>
        <td width="15%">
            <button class="btn btn-primary" type="submit" wire:click="update()">Update</button>
            <button class="btn btn-success" type="submit" wire:click="finish()">Finish</button>
        </td>
    </tr>
</div>

我很难将每个 BookField 正确绑定到其 Book 模型。单击更新按钮时出现的错误是：

Livewire\Exceptions\MethodNotFoundException
Unable to call component method. Public method [update] not found on component: [book-manager]

我收到了类似的属性错误：

Livewire\Exceptions\PropertyNotFoundException
Property [$pages_read] not found on component: [book-manager]

所有 BookField 都使用其特定 Book 模型的正确信息成功呈现。当我在 BookField 组件中转储 $book 变量时，我得到了正确的 Book 实例及其所有属性和方法。

但由于某种原因，它似乎在寻找父类的 $pages_read 属性或 update() 或 finish() 方法，而不是它自己的 BookField 类实例。我没有足够的 Livewire 经验，不知道是什么导致了这个问题或如何解决它，所以如果有人可以帮助我，我将不胜感激。

【问题讨论】：

标签： laravel-livewire

【解决方案1】：

在这里尝试使用:wire:key 而不是:key：

代替：

<livewire:book-field :book="$book" :key="$book->id" />

使用

<livewire:book-field :book="$book" :wire:key="$book->id" />

【讨论】：

不幸的是，这似乎不起作用。它仍然返回相同的错误。

【解决方案2】：

确保视图被 div TAG 包裹

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。