Alpine.js: добавление полей формы с помощью x-модели ⇐ Php

[Anonymous]

Я хотел бы попробовать реализовать инфраструктуру alpine.js в моей существующей встроенной функции JavaScript. У меня есть массив адресов (который содержит улицу, почтовый индекс и т. д.), и к нему добавлена ​​функция, позволяющая добавлять несколько адресов для одного клиента. Код ниже — это когда я использую собственный JavaScript, который работает по желанию:

@csrf ... ... Адрес Добавить адрес

Создать клиента document.addEventListener('DOMContentLoaded', function() { пусть адресИндекс = 1; // Функция для динамического добавления полей адреса функция addAddressFields() { const AddressFields = document.getElementById('addressFields'); const AddressContainer = document.createElement('div'); адресКонтейнер.classList.add('поля адреса'); адресКонтейнер.innerHTML = `
Адрес ${addressIndex} Удалить `; AddressFields.appendChild(адресКонтейнер); АдресИндекс++; } document.getElementById('addAddress').addEventListener('click', function() { addAddressFields(); }); document.addEventListener('click', function(event) { если (event.target.classList.contains('removeAddress')) { событие.preventDefault(); event.target.closest('.address-fields').remove(); АдресИндекс--; } }); }); Я уже пытался использовать alpine.js на основе моего исходного кода. Есть некоторые проблемы с этим. Судя по тому, что я сделал, когда я создаю клиента, в сведениях об адресах отображаются только последние введенные адреса. То есть, например, заполняю адреса, потом хочу добавить еще один. Итак, есть два адреса. Когда я создаю клиента, отображается только один адрес (самый последний).

... ... Добавить адрес Alpinejs Мне нужна помощь в том, как улучшить и исправить мой код. Большое спасибо за вашу помощь и очень признательны.

Это когда я добавляю адреса

Вот что было показано