javascript - Litelement 将对象作为 html 属性传递

Question

我使用 Litelement 创建了一个简单的元素，它有两个属性，分别使用字符串和数组类型的字段和值。当我将值作为 HTML 属性传递时(如下所示)，将发生预期操作并显示该值(如下图所示)。

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

当我使用这个元素作为另一个元素的导入时，出现了问题。在新元素中，第一个元素的值作为第二个元素中的对象传递，如下所示。如何将对象读取为属性？

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

Answer 1

您在 static getproperties() 中的类型错误

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

在 HTML 上

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

关于Lit元素

解决方案很简单，在 prop 中使用括号和 .

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

在 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