Блог

У меня есть компонент alpine/laravel-livewire — выпадающий выбор. Область действия компонента alpine также определяет некоторые функции, которые я вызываю из разных узлов внутри компонента. Интересно, что если я изменяю значение одного из свойств данных внутри функции с областью действия (т. Е. функции A), изменение не отражается внутри другой функции с областью действия (функции B) на том же компоненте. Хотя изменение сохраняется, если я получаю доступ к этим данным с одного из узлов. Пример кода:

     window.dropDownAlpineScope = function(lwire) {
    return {
        open: @entangle('showOptions'),
        dropDownOptions: @entangle('dropDownOptions'),
        dropDownOptionsUnfiltered: lwire.get('dropDownOptions'),
        selectedOption: @entangle('selectedOption'),
        dropDownFor: lwire.get('usedFor'),
        searchString: null,
        optionsCount: null,

        filterOptions() {
            let arr = [...this.dropDownOptionsUnfiltered];
            arr = this.dropDownOptionsUnfiltered.filter(option => {
                    return option['text'] amp;amp; option['text'].toLowerCase().includes(searchString);
            });


            this.dropDownOptions = arr;
            this.optionsCount = arr.length;

            console.log(this.optionsCount); // ######### it prints 3(for example)
        },

        closeOptions(dropDownId, indexOfOption) {
           console.log(this.optionsCount);  // #########  this prints null!!
        },

        initWatcher() {

            this.$watch('searchString', (newStr, oldStr) => {
                this.$nextTick(() => {
                    this.filterOptions();
                });
            });
        }
    }
}
 

если значение searchString изменяется, запускается наблюдатель и значение optionsCount обновлений. Но тогда, если closeOptions функция вызывается с какого-либо узла в качестве обработчика события focusout, значение по optionsCount -прежнему равно нулю.

Кто-нибудь может объяснить, пожалуйста, почему?