Почему свойство 'classList' не может быть прочитано? - PullRequest
Новая
       50

Почему свойство 'classList' не может быть прочитано?

0 голосов
/ 17 февраля 2020

Я пытаюсь добавить и удалить класс в зависимости от того, равна ли переменная 0. Вот мой код: 

import { LitElement, html } from 'lit-element';

class SelectCounter extends LitElement {
static get properties() {
    return {
        numPassengers: {type: Number},
    };
}

constructor() {
    super();
    this.numPassengers = 0;
    this.disableState();
}

createRenderRoot() {
    return this;
}

disableState() {
    this.btn = document.querySelector('.minus');
    if (this.numPassengers === 0) {
        this.btn.classList.add('counter__btn--disable');
    }
}

render(){
    return html`
        <div class="counter">
            <a class="counter__btn minus" href="#"></a>
            <span class="counter__label">${this.numPassengers}</span>
            <a class="counter__btn" href="#"></a>
        </div>
    `;
}
}
customElements.define('select-counter', SelectCounter);

Я пробовал это несколькими способами, но я не понимаю почему это происходит. Есть идеи?

1 Ответ

3 голосов
/ 17 февраля 2020

Вы вызываете disableState() в конструкторе, когда DOM компонента еще не готов, поэтому: 

this.btn = document.querySelector('.minus');

равно null.

Если вы переместитесь что логика c в firstUpdated(), то он должен работать. 

firstUpdated() {
    disableState();
}

disableState() {
    // Also, consider querySelecting inside this.renderRoot
    // to avoid picking elements with the same class in
    // other parts of the document
    this.btn = this.renderRoot.querySelector('.minus');
    // ...
}

Обратите внимание, что вы можете сделать то же самое в более декларативном виде, без необходимости выбрав элемент: 

render() {
    return html`
        <div class="counter">
            <a class="counter__btn minus ${this.numPassengers === 0 ? 'counter__btn--disable' : ''}" href="#"></a>
            <span class="counter__label">${this.numPassengers}</span>
            <a class="counter__btn" href="#"></a>
        </div>
    `;
}

или используя директиву lit-html classMap: 

import {classMap} from 'lit-html/directives/class-map.js';

// ...

render() {
    return html`
        <div class="counter">
            <a class=${classMap({
                counter__btn: true,
                minus: true,
                'counter__btn--disable': this.numPassengers === 0,
            })} href="#"></a>
            <span class="counter__label">${this.numPassengers}</span>
            <a class="counter__btn" href="#"></a>
        </div>
    `;
}
...