如何在 alpinejs 的 x-text 中不出现 NAN 错误

Question

这里我想获取gap属性的值，但是显示的是NAN错误！

    <div x-data="tamrin()">
        <h1 x-text="gap"></h1>

        <script>
            function tamrin() {
                return {
                    countTo: new Date("May 30, 2021 00:00:00").getTime(),
                    now: new Date().getTime(),
                    gap: this.countTo - this.now,
                }
            }
        </script>
    </div>

Answer 1

您正在返回一个对象字面量，因此那里的this 指的是全局window，而不是那个对象字面量。

一种选择是首先创建countTo 和now 变量，然后创建具有gap 属性的对象：

window.MyComponent = function() {
  console.log(`this === window = ${ this === window }`);
  
  const countTo = new Date('May 30, 2021 00:00:00').getTime();
  const now = new Date().getTime();

  return {
    countTo,
    now,
    gap: countTo - now,
  };
};

<div x-data="MyComponent()">
  <span x-text="gap"></span>
</div>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

另一种选择是使用getter 并将gap 转换为computed property，以便该getter 中的this 将引用您的组件实例：

window.MyComponent = () => ({
  countTo: new Date('May 30, 2021 00:00:00').getTime(),
  now: new Date().getTime(),
  get gap() {
    console.log(`this === window = ${ this === window }`);
    
    return this.countTo - this.now;
  },
});

<div x-data="MyComponent()">
  <span x-text="gap"></span>
</div>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

编辑：

如果要不断刷新显示的值，请使用第二种解决方案（getter）并使用setInterval更新now属性：

window.MyComponent = () => ({
  countTo: new Date('May 30, 2021 00:00:00').getTime(),
  now: Date.now(),
  
  init() {
    setInterval(() => {
      requestAnimationFrame(() => {
        this.now = Date.now();
      });
    }, 200);
  },
  
  get gap() {    
    return `${ Math.round(this.countTo - this.now / 1000) } seconds left.`;
  },
});

<div x-data="MyComponent()" x-init="init">
  <span x-text="gap"></span>
</div>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>