Блог

Главная - Вопросы по программированию - Laravel Livewire: не удается прочитать свойство ‘$wire’ неопределенного

Laravel Livewire: не удается прочитать свойство ‘$wire’ неопределенного

#javascript #php #laravel #laravel-livewire

#javascript #php #laravel #laravel-livewire

Вопрос:

У меня проблема с laravel livewire. Я думаю, что проблема действительно проста, но я не могу ее решить. Позвольте мне все объяснить. У меня есть daterangepicker (LitePicker), он работает идеально, но я хочу, когда пользователь выбирает значение диапазона дат, чтобы установить это значение для свойства и фильтровать данные. Моя проблема в том, что я не могу установить значение для свойства. мой 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 функции, пуст или идентификатор компонента отсутствует, и я не знаю, как это исправить.
Теперь вот ошибка, которую я получил при выборе даты:

 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 безуспешно.

Комментарии:

1. window.livewire.find('') пустая находка? Как он может узнать, какой компонент извлекать? Вероятно, вам следует использовать Alpine для извлечения данных, затем вы можете @entangle использовать его между Livewire и Alpine.

Ответ №1:

Я использовал так

 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();
}

Комментарии:

1. спасибо за пример. Я уже нашел решение проблемы, но дам вам точку для примера

2. @PlamenPenchev не могли бы вы предоставить решение, которое вы нашли? или это то же самое, что предложил Roland?

Ответ №2:

Попробуйте зарегистрировать AlpineJS после сценариев Livewire.

Метки: