AlpineJS与$nextTick：筛选后统计列表项数异常问题

问题现象 #

• 使用$nextTick(() =>时触发语法错误：Uncaught SyntaxError: Invalid or unexpected token at new AsyncFunction
• 省略$nextTick(() =>后计数器可运行，但统计结果始终滞后一步

核心原因 #

1. PHP转义冲突：PHP渲染HTML时，未正确处理JavaScript箭头函数的特殊字符，导致浏览器解析脚本时出错。
2. DOM更新时机差：AlpineJS修改x-show后，DOM显示状态不会立即更新，直接读取DOM会获取旧状态，造成计数滞后。
3. 脚本初始化顺序：AlpineJS脚本加载位置或初始化时机不当，导致组件方法无法被正确识别。

解决步骤 #

1. 修复内联事件语法冲突 #

将内联@change中的箭头函数改为传统函数写法，规避PHP转义问题：

<!-- 原代码 -->
@change="$nextTick(() => updateResultsCount());"

<!-- 修改后 -->
@change="$nextTick(function() { updateResultsCount(); });"

2. 脱离DOM依赖，直接计算计数 #

放弃通过getComputedStyle读取DOM状态，改为基于筛选条件直接计算可见项数量：

window.alpine.filter = function() {
    return {
        ort:'',
        kategorie:'',   
        currentCount: '#php_variable#',
        // 预存所有项的筛选属性
        items: Array.from(document.querySelectorAll('.toggle')).map(el => ({
            ort: el.dataset.ort,
            kategorie: el.dataset.kategorie
        })),
        updateResultsCount: function() {
            this.currentCount = this.items.filter(item => {
                const matchesOrt = !this.ort || item.ort === this.ort;
                const matchesKategorie = !this.kategorie || item.kategorie === this.kategorie;
                return matchesOrt && matchesKategorie;
            }).length;
        }
    }
}

3. 调整脚本加载与初始化顺序 #

确保AlpineJS脚本在组件定义前加载，或添加defer保证DOM解析完成后执行：

<!-- 放在<head>中使用defer -->
<script type="text/javascript" src="xxx/vendor/alpine.js" id="alpinejs-js" defer></script>

<!-- 再放置组件定义脚本 -->
<script>
window.alpine = {};
window.alpine.filter = function() { /* ... */ }
</script>

4. 初始化时同步计数 #

在组件初始化时调用计数方法，确保初始值正确：

window.alpine.filter = function() {
    return {
        // ... 原有属性
        init() {
            this.updateResultsCount();
        },
        // ... 原有方法
    }
}

并在根组件添加初始化钩子：

<div x-data="alpine.filter()" x-init="init()">

完整修改后代码示例 #

<div x-data="alpine.filter()" x-init="init()">

    <select id="ort" name="ort" x-model="ort" @change="$nextTick(function() { updateResultsCount(); });">
        <option value="">Alle Orte</option>
        <option value="bregenz">Bregenz</option>
        <option value="frastanz">Frastanz</option>                  
    </select>
    
    <select id="kategorie" name="kategorie" x-model="kategorie" @change="$nextTick(function() { updateResultsCount(); });">
        <option value="">Alle Kategorien</option>
        <option value="kategorie-a">Kategorie A</option>
        <option value="uncategorized">Uncategorized</option>                    
    </select>

    <div><span x-text="currentCount"></span> entries</div>
    
    <div class="toggle" x-show="(!ort || ort === 'bregenz') && (!kategorie || kategorie === 'kategorie-a')" x-data="{ open: false, switchOpen: function() { this.open = !this.open } }" x-bind:class="{ 'active': open }" data-ort="bregenz" data-kategorie="kategorie-a" style="display: none;">Toogle Content</div>

    <div class="toggle" x-show="(!ort || ort === 'frastanz') && (!kategorie || kategorie === 'kategorie-a')" x-data="{ open: false, switchOpen: function() { this.open = !this.open } }" x-bind:class="{ 'active': open }" data-ort="frastanz" data-kategorie="kategorie-a">Toogle Content</div>
</div>

<script type="text/javascript" src="xxx/vendor/alpine.js" id="alpinejs-js" defer></script>

<script>
window.alpine = {};
window.alpine.filter = function() {
    return {
        ort:'',
        kategorie:'',   
        currentCount: '#php_variable#',
        items: Array.from(document.querySelectorAll('.toggle')).map(el => ({
            ort: el.dataset.ort,
            kategorie: el.dataset.kategorie
        })),
        init() {
            this.updateResultsCount();
        },
        updateResultsCount: function() {
            this.currentCount = this.items.filter(item => {
                const matchesOrt = !this.ort || item.ort === this.ort;
                const matchesKategorie = !this.kategorie || item.kategorie === this.kategorie;
                return matchesOrt && matchesKategorie;
            }).length;
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者Horst Otto