-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/mvp.css" />
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
></script>
<script>
const data = {
count: 0,
counter() {
console.log(data.count++);
setTimeout(data.counter, 1000);
},
};
</script>
</head>
<body>
<section x-data="data">
<aside x-init="counter">
<p>Count: <span x-text="count"></span></p>
</aside>
</section>
</body>
</html>Goal
ProblemValue of ReasonThere's probably much better ways to implement an automatic incremental counter. This is a simplified model of updating RequestAny help regarding "how to update |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 7 replies
-
|
X data accepts a function that returns an object. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, here's what I tried again on CodePen:
<section x-data="getData">
<aside>
<p>Count: <span x-text="count"></span></p>
</aside>
</section>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
function getData() {
return {
count: 0,
counter() {
console.log(this.count++);
setTimeout(this.counter, 1000);
},
init() {
this.counter();
}
};
}
@import url("https://unpkg.com/[email protected]/mvp.css");Here's what I see: 
For some reason, the |
Beta Was this translation helpful? Give feedback.
-
|
Also, notice that in my separate comment below, I only had to use 1 line of raw JS to make it work. Just set the
How to access the reactive context?
Which would that be? I am just very confused... 😓 |
Beta Was this translation helpful? Give feedback.
-
|
That is really strange. What if you just do
|
Beta Was this translation helpful? Give feedback.
-
|
Oh It's obviously 😂 You are breaking the this context on the set timeout. You need to use an arrow function, or bind the this on the function. Otherwise Common mistake once people start using this. Even I didn't notice it for a bit despite definitely running into that and knowing about it. |
Beta Was this translation helpful? Give feedback.
-
|
OH. Did not know that... Never used Thanks a lot for your patient help. Much appreciated. 😊 |
Beta Was this translation helpful? Give feedback.
-
Potentially Non-ideal SolutionThis VanillaJS solution is not ideal, unless there is no way to do this in Alpine, in which case it's fine. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/mvp.css" />
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
></script>
<script>
const data = {
count: 0,
counter() {
console.log(data.count++);
document.querySelector("#count").innerText = data.count; // set innerText
setTimeout(data.counter, 1000);
},
};
</script>
</head>
<body>
<section x-data="data">
<aside x-init="counter">
<p>Count: <span id="count">0</span></p> <!-- set id attribute -->
</aside>
</section>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
Ideal Solution<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/mvp.css" />
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
></script>
</head>
<body>
<section>
<aside x-data="data">
<p>Count: <span x-text="count"></span></p>
</aside>
</section>
<script>
const data = {
count: 0,
counter() {
console.log(this.count++);
setTimeout(() => this.counter(), 1000);
},
init() {
this.counter();
},
};
</script>
</body>
</html>CreditSee @ekwoka 's comment above. |
Beta Was this translation helpful? Give feedback.
Ideal Solution