Unresponsive counter component
charlene1804 opened this issue · comments
charlene1804 commented
Hello,
I would like to get some help understanding why my counter component is unresponsive.
You can see the source code here:
import { Slim } from 'slim-js';
const template = /*html*/`
<style>
* {
font-size: 200%;
}
span {
width: 4rem;
display: inline-block;
text-align: center;
}
button {
width: 4rem;
height: 4rem;
border: none;
border-radius: 10px;
background-color: seagreen;
color: white;
}
</style >
<button @click="this.dec">-</button>
<span>{{this.count}}</span>
<button @click="this.count++">+</button>
`;
class MyCounter extends Slim {
constructor() {
super();
this.count = 0;
}
inc() {
this.count++;
}
dec() {
console.log('dec');
this.count--;
}
}
Slim.element(
'my-counter',
template,
MyCounter
);
Thanks in advance.
Charlene
Avichay Eyal commented
Hi.
Simple changes would make it work...
- Add
import 'slim-js/directives';
to support events. If you wish to only add the event directive, select it specifically. - Replace the buttons click behavior to this:
<button @click="this.inc()">
instead ofthis.inc
.
Hope this helps.
Full code below.
Closing the issue, please re-open if you have more questions/problems.
import { Slim } from 'slim-js';
import 'slim-js/directives';
const template = /*html*/`
<style>
* {
font-size: 200%;
}
span {
width: 4rem;
display: inline-block;
text-align: center;
}
button {
width: 4rem;
height: 4rem;
border: none;
border-radius: 10px;
background-color: seagreen;
color: white;
}
</style >
<button @click="this.dec()">-</button>
<span>{{this.count}}</span>
<button @click="this.inc()">+</button>
`;
class MyCounter extends Slim {
constructor() {
super();
this.count = 0;
}
inc() {
this.count++;
}
dec() {
console.log('dec');
this.count--;
}
}
Slim.element(
'my-counter',
template,
MyCounter
);
charlene1804 commented
Thank you very much for your answer.