Alpine JS倒计时触发Cannot set properties of null报错如何解决

错误原因 #

1. AlpineJS的x-if指令要求<template>标签内部必须包含唯一的根DOM节点，你第二个x-if="countdown === 0"的模板里直接裸写了文本内容，没有外层包裹元素，当倒计时归0触发模板切换时，Alpine无法正确绑定数据节点，就会抛出这个空对象属性设置错误。
2. 额外问题：你声明的setInterval没有在倒计时结束后清除，会一直持续运行，属于不必要的性能损耗。

修复方案 #

1. 修改HTML模板，给倒计时完成的内容加根节点

<div x-data="appTimer()">
    <div x-show="active">
        <template x-if="countdown > 0">
            <div>
                <div>Counting down</div>
                <div x-text="countdown"></div>
            </div>
        </template>
        <template x-if="countdown === 0">
            <!-- 加一个根div包裹文本即可 -->
            <div>Countdown completed!</div>
        </template>
    </div>
</div>

2. 优化JS逻辑，倒计时结束后清除定时器

<script>
    function appTimer()
    {
        return {
            active: true,
            countdown: 5,
            init() {
                // 把定时器id存起来，方便后续清除
                let timer = window.setInterval(() => { 
                  if(this.countdown > 0) {
                    this.countdown = this.countdown - 1
                    console.log(this.countdown)
                  } else {
                    // 归0后清除定时器
                    clearInterval(timer)
                  }
                }, 1000)
            }
        }
    }
</script>

修改完成后重新运行即可消除报错。

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