开发者问题收集

Livewire Laravel - TypeError:无法读取 null 的属性“getAttributeNames”

2020-07-09
6621

我在发送表单后从 Ajax 获取数据。有一个侦听器正在将属性设置为我的组件。

我想要实现的是在提交表单后显示结果。 在组件中,模型已被成功检索,但当我想将其显示到我的组件时,我收到错误。

directive_manager.js:26 Uncaught (in promise) TypeError: Cannot read property 'getAttributeNames' of null
    at _default.value (directive_manager.js:26)
    at new _default (directive_manager.js:6)
    at new DOMElement (dom_element.js:12)
    at Function.value (dom.js:36)
    at Component.get (index.js:56)
    at Component.value (index.js:272)
    at Component.value (index.js:246)
    at Component.value (index.js:182)
    at Component.value (index.js:158)
    at Connection.value (index.js:30)

index.blade.php

   <div id="results-products" class="results-products">
        <livewire:charts-products>
    </div>

....
<script>
...
var product= fetchData(url);
window.livewire.emit('set:product', product)
...
</script>

charts-products.blade.php

<div>
    @isset($product)
    @foreach ( $product->category as $category)
    <div class="card">
        <div class="card-header">
            <h4>Product category</h4>
        </div>
    </div>
    @endforeach
    @endisset

</div>

ChartsProducts.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Product;

class ChartsProducts extends Component
{

    public $products;

    protected $listeners = [
        'set:product' => 'setProduct'
    ];

    public function render()
    {
        return view('livewire.charts-products');
    }


    public function setProduct($product)
    {
        $this->product= Product::find($product);
        //I have checked and the assigned variable is ok
    }


}

产品是一个模型,具有关系类别。

有什么我遗漏的吗?

1个回答

这与 Livewire 内部 dom-differ 的行为方式有关。尝试向循环项添加一个键

<div>
    @isset($product)
        @foreach ($product->category as $category)
            <div class="card" wire:key="{{ $loop->index }}">
                <div class="card-header">
                    <h4>Product category</h4>
                </div>
            </div>
         @endforeach
    @endisset
</div>

请参阅文档中的故障排除 https://laravel-livewire.com/docs/troubleshooting

此外,将您的公共属性从 $products 更改为 $product

PW_Parsons
2020-07-09