Question

我试图根据变量是否等于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);

我已经尝试了几种方法，但是我不明白为什么会这样。有想法吗？

Answer 1

当组件的DOM尚未准备就绪时，您正在构造函数中调用disableState()，因此：

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

是null。

如果您在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的{{1}}指令：

classMap

为什么无法读取属性“ classList”？

1 个答案: