Question

Alpine 表达式错误：无法设置空属性（设置‘_x_dataStack’）

2021-11-02

6144

alpine.js

我用 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、countdown 和 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，因此会造成混淆，要解决此问题，您只需将消息包装在 html 元素中，例如：

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

请参阅此 stackblitz 复制

Answer 2

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

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