Issue with Custom Component

Question

I am working on learning lit-element, lit-html. The Component that I am trying to create is a custom select component. I am having an issue populating the drop down values and options. I am seeking guidance on what I should do next of to see if I am on the right track.

I have tried doing the repeat function to iterate through the array of options but it is not working.

this is the code for my select component.

import {LitElement, html} from 'lit-element';
import {repeat} from 'lit-html/lib/repeat.js';

class HiSelect extends LitElement{
    static get properties(){
        return{
            SelName: String,
            SelplaceHolder: String,
            SellabelName: String,
            SelValue: Array
        }
    }

    constructor(){
        super();
    }

    render(){
        return html`
        <div class="form-field">
            <div class="form-field__control">
                <select id="form-field-select" class="form-field__select" 
                 name="${this.SelName}">
                    ${repeat(this.SelValue, (option) => html`<option>${option.value} 
                </option>`)};
                </select>
                <label for="${this.SelName}" class="form- 
                  field__label">${this.SellabelName}</label>
                <div class="form-field__bar"></div>
            </div>
        </div>
        `
    }
}
customElements.define('hi-select',HiSelect);

and this is the code for my app.js

import {LitElement, html} from 'lit-element';
import './Hi-TextBox.js';
import './Hi-TextArea.js';
import './Hi-Select.js';

class Components extends LitElement{
    static get properties(){
        return{

        }
    }

    constructor(){
        super();
        this.labelName="Category";
        this.name="Category";
        this.value="";
        this.placeHolder=" ";
        this.Columns = 30;
        this.Rows = 10;
        this.TaName = "Description";
        this.Taplaceholder=" ";
        this.TalabelName="Description";
        this.SelName = "Select Test";
        this.SellabelName = "--Select one--"
        this.SelValue = ["kitchen,Bedroom,Garage"]

    }

    render(){
        return html`
        <style>
            .form-control{
                width:25%;
            }
        </style>
            <h3>Components</h3>
            <div class="form-control">
                <hi-textbox type="text" .labelName="${this.labelName}" .name="${this.name}" .value="${this.value}" 
                .placeHolder="${this.placeHolder}"></hi-textbox>
            </div>
            <div class="form-control">
                <hi-textarea .TalabelName="${this.TalabelName}" .TaName="${this.TaName}" .Columns="${this.Columns}" .Rows="${this.Rows}"></hi-textarea>
            </div>
            <div class="form-control">
                <hi-select .SelName="${this.SelName}" .SellabelName="${this.SellabelName}">
                    <option .SelValue=${this.SelValue}>${this.SelValue}</option>
                </hi-select>
            </div>
        `;
    }
}

customElements.define('components-app',Components)

The result I am looking for is a select drop down component populated by the array that I have as a property. Right now I am getting nothing for the dropdown like it is not even repeating through the array to provide an option to select .

any help would be great .

Answer 1

This is what I did to fix it in the hi-select.js

 <select id="form-field-select" class="form-field__select" name="${this.SelName}">
                    ${repeat(this.SelValue, (i) => html`<option>${i}</option>`)}
                </select>

then in the app.js called it like this

<div class="form-control">
                <hi-select .SelName="${this.SelName}" .SellabelName="${this.SellabelName}" .SelValue="${this.SelValue}"></hi-select>
            </div>

and now my dropdown is populating