如何制作一种将项目推送到带有 lit-element 的空数组的方法

Question

我有一个带有 lit-element 的空数组，用于添加我通过循环生成的 2 到 13 岁之间的年龄。我需要使用一种方法将每个元素添加到数组中，但我不知道如何使其工作。这是我的：

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

class ChildrenInput extends LitElement {
    static get properties() {
        return {
            ages: {type: Array},
        };
    }

    constructor() {
        super();
        this.minAge = 2;
        this.maxAge = 13;
        this.ages = [];
    }

    ages() {
        for (let age = this.minAge; age <= this.maxAge; age++) {
            this.ages.push(age);
        }
    }

    render(){
        return html`
            <div>
                <select>
                    <option selected>--</option>
                    <option>${this.ages.map(item => html`<li>${item}</li>`)}</option>
                </select>
            </div>
        `;
    }
}

customElements.define('children-input', ChildrenInput);

Answer 1

您首先需要调用您的函数，给定一个与数组不同的名称属性，然后在循环机制中使用选项元素，如下所示：

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

class ChildrenInput extends LitElement {
    static get properties() {
        return {
            ages: {type: Array},
        };
    }

    constructor() {
        super();
        this.minAge = 2;
        this.maxAge = 13;
        this.ages = [];
        this.loopAges();
    }

    loopAges() {
        for (let age = this.minAge; age <= this.maxAge; age++) {
            this.ages.push(age);
        }

        // Alternative syntax:
        // let age = this.minAge; while ( age <= this.maxAge ) this.ages.push( age++ );

    }

    render(){
        return html`
            <div>
                <select>
                    <option selected>--</option>
                    ${this.ages.map(item => html`<option value="${item}">${item}</option>`)}
                </select>
            </div>
        `;
    }
}

customElements.define('children-input', ChildrenInput);

Here's a working version

如何制作一种将项目推送到带有 lit-element 的空数组的方法

how to make a method that push items to empty array with lit-element

javascript

arrays

web-component

lit-element