Laravel Livewire：无法读取属性未定义的“$wire”

Question

我对 laravel livewire 有疑问。我认为问题很简单，但我无法解决。让我解释一切。我有一个 daterangepicker (LitePicker)，他工作得很好，但我想当用户 select 日期范围值时将此值设置为属性并过滤数据。我的问题是我无法为属性设置值。我的 Js 代码：

@push('scripts')
<script type="text/javascript">
document.addEventListener('livewire:load', function() {
    var field = document.getElementById('filter-date-range')
    var dateRange;
    var picker = new Litepicker({
        element:field,
        format: 'DD/MM/YYYY',
        lang: 'de',
        singleMode: false,
        onSelect: function(start, end) {
           @this.dateRange = start
        }
    });
})

</script>
@endpush

@this 指令编译为

onSelect: function(start, end) {
           window.livewire.find('').dateRange = start
        }

我觉得是这里的问题，因为传递给find函数的参数为空或者组件的id丢失，我不知道如何解决。现在这是我在日期为 selected 时收到的错误：

index.js:30 Uncaught TypeError: Cannot read property '$wire' of undefined
    at Livewire.value (index.js:30)
    at e.onSelect (book_keeping:695)
    at e.r.Litepicker.setDateRange (main.js:12)
    at e.onClick (main.js:12)
    at HTMLDocument.<anonymous> (main.js:12)

如您所见，我使用了 push 指令，所以这是我加载脚本的代码

@livewireScripts
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
@stack('scripts')

我也尝试过事件 wire:model 和 wire:change 但没有成功。

Answer 1

尝试在 Livewire 脚本之后注册 AlpineJS。

Answer 2

我是这样用的

document.addEventListener('livewire:load', function() {
        var field = document.getElementById('date-from')
        var picker = new Litepicker({
            element:field,
            lang: 'de',
            autoApply: false,
            singleMode: true,
            numberOfColumns: 1,
            numberOfMonths: 1,
            showWeekNumbers: true,
            format: "D MMM, YYYY",
            dropdowns: {
                minYear: 1990,
                maxYear: null,
                months: true,
                years: true,
            },

            setup: (picker) => {
                picker.on('selected', (date1, date2) => {
                    Livewire.emit('from-selected', date1)
                });
            }
        });
    })

比 livewire

protected $listeners = ['from-selected' => 'fromSelected'];

public function fromSelected($from){
    $this->from = $from;
    $this->resetPage();
}

Laravel Livewire：无法读取属性未定义的“$wire”

Laravel Livewire: Cannot read property '$wire' of undefined

javascript

php

laravel

laravel-livewire

Laravel Livewire：无法读取 属性 未定义的“$wire”

Laravel Livewire: Cannot read property '$wire' of undefined

javascript

php

laravel

laravel-livewire

Laravel Livewire：无法读取属性未定义的“$wire”