In Laravel 8 / livewire 2.5 / alpinejs 3 application I make context menu for listing of data and to show only 1 context menu on server side I senerate on server side array :
foreach( $this->newsDataRows as $nextNewsDataRow ) {
$this->selectedNews[$nextNewsDataRow->id] = false;
}
in blade file :
selectedNews: @json($selectedNews),
and condition for context menu :
<div class="show_context_menu_container" x-show="selectedNews[{{$news->id}}]"
Problem is that when context menu is selected and operation completed I trigger event to set all elements of selectedNews into false :
window.addEventListener('hideAllSelectedNewsItems', event => {
console.log('hideAllSelectedNewsItems::')
console.log( this.selectedNews )
this.selectedNews.map((nextSelectedNews, index) => {
console.log('nextSelectedNews::')
console.log(nextSelectedNews)
this.selectedNews[index]= false
})
})
But I got error : https://prnt.sc/YKDvN_MfbYBN I wonder why this.selectedNews is treated as proxy and in which way it can be fixed ?
Thanks!
I found a decision with entries method, converting proxy object into array
selectedNews = Object.entries(this.selectedNews)
this.selectedNews = []
var self = this
selectedNews.map((nextSelectedNews, index) => {
console.log('nextSelectedNews::')
console.log(nextSelectedNews)
...
})
Not sure it is a best decision, but it works for me.