Alpine 表达式错误：无法设置 null 属性（设置 '_x_dataStack'）

Question

我用 Alpine JS 创建了一个简单的倒计时，但是当计时器为 0 时，出现错误。首先在x-data中声明函数appTimer。

 <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">
            Countdown completed!
        </template>
    </div>
</div>

这段代码JS，这里设置了active、倒计时和window.setInterval。

 <script>
    function appTimer()
    {
        return {
            active: true,
            countdown: 5,
            init() {
                window.setInterval(() => { 
                  if(this.countdown > 0) this.countdown = this.countdown - 1; console.log(this.countdown)}, 1000)
            }
        }
    }
</script>

Answer 1

问题是您将文本而不是 html 放入模板中，alpine 尝试获取模板中定义的 html 但没有找到任何内容，因此会感到困惑，要解决此问题，您只需将消息包装在html 元素，例如：

<template x-if="countdown === 0">
  <div>Countdown completed!</div>
</template>

看看这个stackblitz 复制品

Answer 2

我认为这取决于你的比较。你比较严格但我不知道倒计时是否是整数。尝试与 == 进行比较

<template x-if="countdown == 0">