I have a problem with laravel livewire. I think the problem is really simple, but I can not solve it. Let me explain everything. I have a daterangepicker (LitePicker), he works perfect, but I want when user select date range value to set this value to the property and filter data. My problem is that I can’t set value to the property. my Js Code:
@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
directive is compiled to
onSelect: function(start, end) { window.livewire.find('').dateRange = start }
I think the problem is here, because parameter which is passed to find
function is empty or the id of the component is missing, and I don’t know how to fix it.
Now here is the the error I received when date is 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)
As you can see I use push
directive so here is the code where I load the scripts
@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')
Also I tried with events wire:model
and wire:change
without success.
Advertisement
Answer
I used like this
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) }); } }); })
than in livewire
protected $listeners = ['from-selected' => 'fromSelected']; public function fromSelected($from){ $this->from = $from; $this->resetPage(); }