It looks like you’re mixing up value with num, maxValue with max, and minValue with min.
You’ll also likely want some text inside your a tags so that they’re reasonably clickable. Technically, they should also be button tags (styled to your liking), as a tags are considered for linking to parts of a page or to another page (see https://stackoverflow.com/a/37148542/6090140 for more details). You then will not need e.preventDefault(); inside decrement and increment.
<button @click="${this.decrement}">-</button>
I am trying to pass data from one component to another. My idea is to have a generic component with buttons that increase or decrease a value and add those specific values to another template.
Here is my code with the buttons:
import { LitElement, html } from 'lit-element';
class ButtonsCounter extends LitElement {
static get properties() {
return {
max: {type: Number},
min: {type: Number},
num: {type: Number},
value: {type: Number},
};
}
constructor() {
super();
this.value = 0;
}
createRenderRoot() {
return this;
}
increment(e) {
e.preventDefault();
if (this.value < this.maxValue) this.value++;
}
decrement(e) {
e.preventDefault();
if (this.value > this.minValue) this.value--;
}
render(){
return html`
<div class="searchCounter" max=${this.maxValue} min=${this.minValue}>
<a href="#" @click="${this.decrement}"></a>
<span num=${this.value}>${this.value}</span>
<a href="#" @click="${this.increment}"></a>
</div>
`;
}
}
customElements.define('buttons-counter', ButtonsCounter);
Here is the template where I want to add the data that will go to the previous template:
import { LitElement, html } from 'lit-element';
import './buttons-counter'
class SelectOption extends LitElement {
constructor() {
super();
this.num = 0;
this.max = 5;
this.min = 0;
}
createRenderRoot() {
return this;
}
render(){
return html`
<buttons-counter .max="${this.max}" .min="${this.min}" .num="${this.num}"></buttons-counter>
`;
};
}
customElements.define('select-option', SelectOption);
I’ve tried different ways but none works. Any idea?
