Litelement Передать объект как атрибут html - PullRequest
Новая
       60

Litelement Передать объект как атрибут html

0 голосов
/ 09 июля 2020

Я создал простой элемент, используя 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);

enter image description here

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?



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` `: ''}`; }} window.customElements.define ('эль-два', ЭльТво);

1 Ответ

0 голосов
/ 09 июля 2020

У вас плохой Тип в static get properties()

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-Element

Решение простое, используйте кронштейны и . в стойке

Арт. 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> `;

эл-два. 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);

Тестирование: codeanbox.io

...