如何在 alpine.js 应用程序中使用时间间隔制作计时器

Question

使用 alpine.js 2 我尝试在应用程序的页脚（为所有布局设置）中定义计时器：

<div>
    
    <div  x-data="appFooterComponent()" x-init=" console.log('initTimer()::'); refreshTime();
    setInterval(refreshTime, 1000) ; console.log('END initTimer::');">
        <div >
            ...
            <span style="background-color: yellow" x-text="refreshTime(@this)"></span>
        </div>
    </div>
</div>

<script>
    // THAT DOES NOT WORK
    // this.refreshTime()
    // setInterval(refreshTime, 1000)

    function appFooterComponent() {
        return {
            refreshTime() {
                return moment(new Date()).format('DD MMMM, YYYY HH:mm:ss')
            },
        }
    } 

</script>

因此，当打开任何新页面时，我会看到当前日期时间是如何设置的，但没有间隔，时间也不会刷新。在控制台中，我看到了 x-init 控制台命令的输出，但没有看到时间间隔... 如何解决？

谢谢！

Answer 1

下面的方法行得通吗？

你可能想用 Alpine.js 做的是有一个你更新的 time 变量（使用 setInterval），然后你可以使用 this.time 和相关的读取格式化时间Moment.js表达式。

<div>
    <div x-data="appFooterComponent()" x-init="init()">
        <div>
            ...
            <span style="background-color: yellow" x-text="getTime()"></span>
        </div>
    </div>
</div>

<script>
    function appFooterComponent() {
        return {
            time: new Date(),
            init() {
              setInterval(() => {
                this.time = new Date();
              }, 1000);
            },
            getTime() {
                return moment(this.time).format('DD MMMM, YYYY HH:mm:ss')
            },
        }
    } 

</script>

如何在 alpine.js 应用程序中使用时间间隔制作计时器

How to make timer in alpine.js app with time interval

alpine.js