Alpine.js列表筛选后全局客户、车辆计数异常该如何修复？

你遇到的计数异常问题确实是全局计数未重置导致的，只要在筛选条件变动时先清空原有计数，再重新统计新的筛选结果即可。核心修改点是在存储全局计数的组件上添加监听逻辑，当搜索关键词变动时自动将clientcount和carcount重置为0，避免历史累加值干扰新的统计结果。

修复后完整代码如下：

<html>
<head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
<div
    x-data="{
        search: '',
        items: [
            {client: {name: 'Hugo', id:'0001' }, stuff: {cars: [ 'Horch', 'Benz' ] } },
            {client: {name: 'Hans', id:'0002' }, stuff: {cars: [ 'Horch'         ] } },
            {client: {name: 'Egon', id:'0003' }, stuff: {cars: [ 'VW', 'Maybach' ] } },
        ],
        get filteredItems() {
            return this.items.filter(
                i => i.client.name.startsWith(this.search)
            )
        },
    }"
>
    <input x-model="search" placeholder="Search...">
    <ul x-data="{ 
        clientcount : 0, 
        carcount : 0,
        init() {
            // 监听搜索关键词变动，每次搜索变更先重置计数
            this.$watch('$parent.search', () => {
                this.clientcount = 0
                this.carcount = 0
            })
        }
    }">
        <p>Number of clients: <span x-text="clientcount"></span></p>
        <p>Number of cars: <span x-text="carcount"></span></p>
        <template x-for="item in filteredItems" :key="item.client.name">
            <li x-data="{ individualcount : 0 }"
                x-effect="carcount += individualcount; ++clientcount">
                <span x-text="item.client.id"></span>
                <span x-text="item.client.name"></span>
                (<span x-text="individualcount"></span>)
                <ul>
                    <template x-for="car in item.stuff.cars" :key="car">
                        <li x-text="car"
                            x-effect="++individualcount">
                        </li>
                    </template>
                </ul>
            </li>
        </template>
    </ul>
</div>
</body>
</html>

如果实际场景中筛选条件不止搜索关键词一个，也可以直接监听filteredItems的变动来触发重置，逻辑通用。

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