Comments (2)
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
);
from slim.js.
Thank you very much for your answer.
from slim.js.
Related Issues (20)
- package.json.module is pointing to an unexisting file HOT 1
- Storybook components HOT 2
- Typing for attributeChangedCallback lacks parameters HOT 1
- WEBP Support HOT 3
- "Uncaught TypeError" when using slim-js with @babel/preset-env HOT 4
- s:if Conditional rendering not working HOT 9
- [SUGGESTION] Provide a way to take outter css in the shadowDOM HOT 2
- Non-minified package distribution HOT 1
- if directive inside foreach directive HOT 3
- Idea for cleaner templates HOT 1
- Documentation Site - "Oops, this page does not exists" HOT 1
- How does the property directive work? HOT 11
- Query in template css class name does not work in object usage only in object creation HOT 1
- Issue with Webpack exports
- How to setup vscode with `/*html*/` and typings HOT 2
- Links broken on slimjs.org HOT 1
- What is the point of this library? HOT 1
- Is this repo still active? HOT 2
- How to use the CDN?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slim.js.