Как сделать метод, который pu sh элементов в пустой массив с lit-элементом - PullRequest
Новая
       35

Как сделать метод, который pu sh элементов в пустой массив с lit-элементом

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

У меня есть пустой массив с lit-element для добавления возраста от 2 до 13 лет, который я генерирую с помощью al oop. Мне нужно добавить каждый элемент в массив, используя метод, но я не знаю, как заставить его работать. Вот что у меня есть: 

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);

1 Ответ

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

Сначала вам нужно вызвать вашу функцию, дав имя, отличное от свойства array, и использовать элемент option в механизме l oop следующим образом: 

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);

Вот рабочая версия

...