Question

未捕获的类型错误：无法读取未定义的属性（读取'$wire'） - Livewire

2022-12-07

1605

javascript php laravel laravel-livewire

我是 Livewire Laravel 的新手，我想使用 laravel 组件的 JS 设置值。

HTML

 <input wire:model="minprice" type="text">
    <button type="button" id="updateFilter" class="btn btn-white">{{ __("Apply") }}</button>

JS

 const updateFilter = document.querySelector('#updateFilter');
    updateFilter.addEventListener('click', updateFilterFun);

    function updateFilterFun() {
        console.log("Asd");
        @this.set('minprice', 1489354, true);
        @this.$refresh();
    }

但是它抛出了这个错误

index.js:32 Uncaught TypeError: Cannot read properties of undefined (reading '$wire') at Livewire.value (index.js:32:60) at HTMLButtonElement.updateFilterFun (projects:524:25)

我尝试使用 Alphine JS 但失败了，有些文档告诉我将它添加到 head 标签中，有些则告诉我在 livewire 之后加载它。有人可以帮我吗？

Answer 1

我不知道这是否有帮助。我在 livewire 组件上使用价格滑块小部件时遇到了同样的问题。我最终为价格滑块使用了以下代码：

HTML：

<div class="widget mercado-widget filter-widget price-filter" style="margin-top: 20px !important;">
    <h2 class="widget-title" style="margin-bottom: 10px;">{{__('Filter by price')}}</h2>
    <div class="widget-content" wire:ignore>
        <div id="slider-range"></div>
        <p>
            <label for="amount">{{__('Price')}}:</label>
            <input type="text" id="amount" readonly>
        </p>
    </div>
</div>

JS：

if ($("#slider-range").length > 0) {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 1000,
        values: [0, 1000],
        slide: function (event, ui) {
            $("#amount").val("€" + ui.values[0] + " - €" + ui.values[1]);
            @this.set('min_price', ui.values[0]);
            @this.set('max_price', ui.values[1]);
        }
    });
    $("#amount").val("€" + $("#slider-range").slider("values", 0) +
        " - €" + $("#slider-range").slider("values", 1));
}