How not to get NAN error in x-text of alpinejs - alpine.js

Question

Here I want to get the value of the gap property, but it shows the NAN error!
<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

You are returning an object literal, so the this there refers to the global window, not to that object literal.
One option would be to first create the countTo and now variables and then the object with the gap property:
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>
Another option would be to use a getter and turn gap into a computed property so that this inside that getter will refer to your component instance:
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>
Edit:
If you want to continuously refresh the displayed value, use the second solution (getter) and update the now property using setInterval:
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>