admin管理员组

文章数量:1406312

I created a simple element using Litelement that has two properties, use field and value of the string and Array type respectively. When I pass the value as the HTML attribute as seen below, the expected action occurs and the value is displayed(seen in the image below).

<my-el value='[{"use": "official","system": "urn:lumiradx:consult"}]' ></my-el>

import {LitElement, html} from 'lit-element';
import '@material/mwc-select';
import '@material/mwc-list/mwc-list-item';

class MyEl extends LitElement {
    static get properties() {
        return {
            useField: {type: String},
            value: {type: Array}
        }
    }
   
    constructor() {
        super();
        this.useField = 'true';
        this.value = [{}];
    }

    render() {
      
        if (typeof(this.value) == "string") {
            this.value = JSON.parse(this.value);
        }
        
        return html`${this.value.map((i, index) => html`
        <div id="div">
        ${this.useField !== 'false' ? html`
        <mwc-select class="useField" value="${i.use}" @change="${e => this.value[index].use = e.target.value}">
        <mwc-list-item value="usual">Usual</mwc-list-item>
        <mwc-list-item value="official">Official</mwc-list-item>
        <mwc-list-item value="temp">Temporary</mwc-list-item>
        <mwc-list-item value="secondary">Secondary</mwc-list-item>
        </mwc-select>` : ''}
        </div>
     `)}`;
    }
}

window.customElements.define('my-el',MyEl);

A problem arises when I use this element as an import in another element. In the new element, the value of the first element is passed as an object in the second as seen below. How can I read an object as an attribute?

<el-two value='{"identifier":[{"use": "official","system": "urn:lumiradx:consult"}]}'></el-two>

import {LitElement, html} from 'lit-element';
import 'my-el/myel.js';


class ElTwo extends LitElement {

    static get properties(){
        return {
           locationId: {type: String},
            value: {type: Array}

        }
    }
    /**default value of properties set in constructor*/
    constructor() {
        super();
        this.locationId = 'true';
        this.value = [{}];
    }

     render() {
        if (typeof(this.value) == "string") {
            this.value = JSON.parse(this.value);
        }
        return html`
       ${this.locationId !== 'false' ? html`<my-el value="${this.value.identifier}" id="locationId"></my-el>` : ''}
  `;
    }
}
window.customElements.define('el-two', ElTwo);

I created a simple element using Litelement that has two properties, use field and value of the string and Array type respectively. When I pass the value as the HTML attribute as seen below, the expected action occurs and the value is displayed(seen in the image below).

<my-el value='[{"use": "official","system": "urn:lumiradx:consult"}]' ></my-el>

import {LitElement, html} from 'lit-element';
import '@material/mwc-select';
import '@material/mwc-list/mwc-list-item';

class MyEl extends LitElement {
    static get properties() {
        return {
            useField: {type: String},
            value: {type: Array}
        }
    }
   
    constructor() {
        super();
        this.useField = 'true';
        this.value = [{}];
    }

    render() {
      
        if (typeof(this.value) == "string") {
            this.value = JSON.parse(this.value);
        }
        
        return html`${this.value.map((i, index) => html`
        <div id="div">
        ${this.useField !== 'false' ? html`
        <mwc-select class="useField" value="${i.use}" @change="${e => this.value[index].use = e.target.value}">
        <mwc-list-item value="usual">Usual</mwc-list-item>
        <mwc-list-item value="official">Official</mwc-list-item>
        <mwc-list-item value="temp">Temporary</mwc-list-item>
        <mwc-list-item value="secondary">Secondary</mwc-list-item>
        </mwc-select>` : ''}
        </div>
     `)}`;
    }
}

window.customElements.define('my-el',MyEl);

A problem arises when I use this element as an import in another element. In the new element, the value of the first element is passed as an object in the second as seen below. How can I read an object as an attribute?

<el-two value='{"identifier":[{"use": "official","system": "urn:lumiradx:consult"}]}'></el-two>

import {LitElement, html} from 'lit-element';
import 'my-el/myel.js';


class ElTwo extends LitElement {

    static get properties(){
        return {
           locationId: {type: String},
            value: {type: Array}

        }
    }
    /**default value of properties set in constructor*/
    constructor() {
        super();
        this.locationId = 'true';
        this.value = [{}];
    }

     render() {
        if (typeof(this.value) == "string") {
            this.value = JSON.parse(this.value);
        }
        return html`
       ${this.locationId !== 'false' ? html`<my-el value="${this.value.identifier}" id="locationId"></my-el>` : ''}
  `;
    }
}
window.customElements.define('el-two', ElTwo);

• javascript
• web-ponent
• lit-element
• lit-html

Share Improve this question Follow asked Jul 8, 2020 at 22:45 Bolu OluwaladeBolu Oluwalade 5111 gold badge11 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You have bad the Type in static get properties()

static get properties(){
   return {
        locationId: {type: String},
        // this is `OBJECT`
        value: {type: Object}
    }
}

On HTML

<el-two value='{"identifier":[{"use": "official","system": "urn:lumiradx:consult"}]}' ></el-two>

On Lit-Element

The solution is simple, use the brackets and . in prop

Ref. https://lit-element.polymer-project/guide/properties

On Javascript

let example1 = html` <el-two .value=${{ identifier: [{ use: 'official', system: 'urn:lumiradx:consult' }] }}> </el-two> `;

let info = { identifier: [{ use: 'official', system: 'urn:lumiradx:consult' }] };
let example2 = html` <el-two .value=${info}></el-two> `;

el-two.js

import { LitElement, html } from 'lit-element';
import 'my-el/myel.js';

class ElTwo extends LitElement {
    static get properties() {
        return {
            locationId: { type: String },
            // this is OBJECT
            value: { type: Object }
        };
    }
    
    constructor() {
        super();
        this.locationId = 'true';
        this.value = [{}];
    }

    render() {
        // -> You don't need to do this anymore
        // if (typeof(this.value) == "string") {
        //    this.value = JSON.parse(this.value);
        //}
        return html` ${this.locationId !== 'false' ? html`<my-el value="${this.value.identifier}" id="locationId"></my-el>` : ''} `;
    }
}
window.customElements.define('el-two', ElTwo);

Testing: codesanbox.io

本文标签： javascriptLitelement Pass an object as an html attributeStack Overflow