Устаревшее состояние AlpineJS после обновлений сервера ⇐ Javascript

[Anonymous]

Я пытаюсь в Laravel-livewire, используя AlpineJS, создать несколько форм. Код ниже —blade.php. Идея такова:

• Сервер предоставляет $fieldRegex.

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

  createComponent

  запускает создание компонента alpineJS с отображаемыми реквизитами.
• onBlur запускает validate() и проверяет $fieldRegex.

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

@pushOnce('head')

document.addEventListener('alpine:init', () => {
Alpine.data('createComponent', (props) => ({
props: {
serverMessage: props.serverMessage,
fieldRegex: props.regex,
},
state: {
show: true,
error: false,
fieldValue: '',
},
init() {
if(this.props.serverMessage)
this.state.error = true;

},
validate() {
console.log(this.props.fieldRegex);
const regex = new RegExp(props.fieldRegex);
if (!regex.test(val)) {
state.error = true;
return;
}
},
}));
});

@endPushOnce

Все работает хорошо, пока не появятся обновления сервера. Как только обновление поступает с сервера и $fieldRegex или $serverMessage изменяется, AlpineJS обнаруживает мутацию и правильно выполняет повторную инициализацию. Проблема в том, что при вызове метода validate() он ссылается на старое значение $fieldRegex. Я вижу это с помощью console.log().
Например, если я сначала визуализирую [a-zA-Z0-9]*, а затем сервер обновляет страницу до [a-z], метод validate() имеет старое регулярное выражение.
После того, как я выполнил множество console.logs(), кажется, что при запуске validate() он запускается на основе контекста this старый компонент или, по крайней мере, он ссылается на старое (устаревшее) состояние.
Что я пробовал:
Я добавил новое значение, при инициализации которого контекст переустанавливается на переменную _this:

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

......
EXISTING CODE
......
@pushOnce('head')

document.addEventListener('alpine:init', () => {
Alpine.data('createComponent', (props) => ({
_this: null,
props: {
serverMessage: props.serverMessage,
fieldRegex: props.regex,
},
state: {
show: true,
error: false,
fieldValue: '',
},
init() {
this._this = this;
if(this._this.props.serverMessage)
this._this..state.error = true;

},
validate() {
console.log(this._this.props.fieldRegex);
const regex = new RegExp(this._this.props.fieldRegex);
if (!regex.test(this._this.state.fieldValue)) {
this._this.state.error = true;
return;
}
},
}));
});

@endPushOnce

Вышеупомянутое, кажется, в некоторой степени решает проблему, но это довольно некрасиво, и я не уверен, что это решает исходную проблему устаревшего состояния.
Еще один вариант, который я попробовал, заключался в том, что при рендеринге каждого компонента я назначаю ключ Wire:key='{{ "key-field-".$name}}', однако когда я меняю это на Wire:key='{{ "key-field-". \Illuminate\Support\Str::random(8)}}' AlpineJS ведет себя правильно. Я считаю, что это происходит потому, что Livewire видит новый идентификатор и уничтожает старый компонент. Неужели это плохая практика?
Есть ли у кого-нибудь опыт борьбы с устаревшими состояниями alpineJS?

Подробнее здесь: https://stackoverflow.com/questions/798 ... er-updates