Unresponsive counter component

[charlene1804]

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

[eavichay]

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 of this.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]

Thank you very much for your answer.