Содержимое раскрывающегося меню исчезло после отправки формы в компоненте Livewire ⇐ Javascript

[Anonymous]

В настоящее время я создаю компонент для своего веб-сайта с помощью Laravel Livewire. У меня есть раскрывающийся список с множественным выбором, в котором параметры динамически генерируются с помощью JavaScript. Проблема в том, что после отправки формы параметры здесь исчезли:

Код: Выделить всё

class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
wire:ignore.self>

Проблема в том, что я не могу использовать новейшую версию Alpine с @livewireScripts, поскольку я использую библиотеку компонентов для своего веб-сайта, в код которой упакован Alpine v2.8. . Я бы извлек оттуда код, который нужен компонентам, но не могу, так как он весь перемешан.
Я застрял в этом вопросе уже около 3 часов и сдался.
В общем, так и есть. код работает нормально, пока форма внутри компонента livewire не обновится и все! Раскрывающийся список исчез.
Вот мой интерфейс (оба журнала консоли в событии отправки сообщения работают нормально):

Код: Выделить всё

Mention roles


Select roles
















let isDropdownInitialized = false; // Flag to track if dropdown is initialized

document.addEventListener('livewire:initialized', () => {
@this.on('send-message', (data) => {
console.log('Message sent!');
console.log('Roles:', data.roles); // Log roles to check if they are passed correctly
roles = data.roles; // Assign the roles to the roles variable
initializeDropdown(roles); // Reinitialize the dropdown with the new roles
});
});

document.addEventListener('DOMContentLoaded', () => {
// Initialize dropdown when the page is loaded
initializeDropdown(
@json($roles)); // Assuming @json($roles) is available in the page

function initializeDropdown(roles) {
const selectedRolesInput = document.getElementById('selectedRoles');
const toggleDropdownButton = document.getElementById('toggleDropdown');
const dropdown = document.getElementById('dropdown');
const displayText = document.getElementById('displayText');
const dropdownContainer = document.querySelector('.relative');

let selectedOptions = [];

// Function to create dropdown items
function createDropdownItems() {
dropdown.innerHTML = ''; // Clear previous dropdown items

roles.forEach(role =>  {
const div = document.createElement('div');
div.classList.add('cursor-pointer', 'select-none', 'relative', 'py-2', 'pl-3',
'pr-9',
'hover:bg-primary', 'hover:text-white');
div.setAttribute('data-role-id', role.id);
div.addEventListener('click', function(event) {
event.stopPropagation();
toggleOption(role);
});

const span = document.createElement('span');
span.textContent = role.name;
span.classList.add('block', 'truncate');

const checkIcon = document.createElement('span');
checkIcon.classList.add('absolute', 'inset-y-0', 'right-0', 'flex', 'items-center',
'pr-4',
'text-primary');
checkIcon.style.display = selectedOptions.some(selected => selected.id === role
.id) ? 'block' :
'none';

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('class', 'h-5 w-5');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('viewBox', '0 0 20 20');
svg.setAttribute('fill', 'currentColor');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('fill-rule', 'evenodd');
path.setAttribute('d',
'M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
);
path.setAttribute('clip-rule', 'evenodd');

svg.appendChild(path);
checkIcon.appendChild(svg);
div.appendChild(span);
div.appendChild(checkIcon);
dropdown.appendChild(div);
});
}

// Toggle the dropdown visibility
toggleDropdownButton.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
});

// Toggle selection of a role
function toggleOption(role) {
const index = selectedOptions.findIndex(selected => selected.id === role.id);
if (index !== -1) {
selectedOptions.splice(index, 1);
} else {
selectedOptions.push(role);
}
updateDisplayText();
createDropdownItems();
updateSelectedRolesInput();
}

// Update the displayed text of selected roles
function updateDisplayText() {
displayText.textContent = selectedOptions.length ? selectedOptions.map(option => option.name)
.join(', ') :
'Select roles';
}

// Update the hidden input field with selected roles
function updateSelectedRolesInput() {
const selectedIds = selectedOptions.map(option =>  option.id).join(',');
selectedRolesInput.value = selectedIds;
selectedRolesInput.dispatchEvent(new Event('input'));
}

// Initialize the dropdown items
createDropdownItems();

// Close the dropdown if clicked outside
document.addEventListener('click', function(event) {
if (!dropdownContainer.contains(event.target) && dropdown.style.display === 'block') {
dropdown.style.display = 'none';
}
});
}
});

А это мой бэкэнд (частично):

Код: Выделить всё

Подробнее здесь: [url]https://stackoverflow.com/questions/79346894/dropdown-menu-contents-gone-after-form-submission-in-livewire-component[/url]