Ошибка загрузки данных Lit-Element в update-element. js - PullRequest
Новая
       85

Ошибка загрузки данных Lit-Element в update-element. js

0 голосов
/ 18 июня 2020

У меня есть следующий элемент: 

import {LitElement, html} from '@polymer/lit-element';
import {SdkArticle} from '../elements/sdk-article/sdk-article.js'

class PraksisView extends LitElement {

    static get properties() {
        return {
            articles: {type: Array},
        };
    }

    constructor() {
        super();
        this.articles = [];
    }

    async firstUpdated() {
        await fetch(`/testData.json`)
            .then(r => r.json())
            .then(async data => {
                this.articles = data.articles;
            });
    }


    render() {
        return html `
          <style>
     .indent-1 {float: left;}
    .indent-1 section {width: 50%; float: left;}
        header {
            display: block;
            height: 50px;
            background-color: #215959;
            color: white;
        }
        .center {
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 50px;
}
        </style>
        <header>
            <h3 class="center">Almen praksis</h3>
        </header>  
        <section class="indent-1">
            <section>                
                <div>
                    <ul>
                        <li>Patientbehandling</li>
                        <li>Klinikdrift</li>
                        <li>Midtkraft</li>
                    </ul>
                </div>
            </section>                
            <section>
         ${this.articles.map(
            article =>
                html`
                <div>
                    <sdk-article data=${article}></sdk-article>
                </div>
            `,
        )}
            </section>
        </section>
`;
    }
}

customElements.define('praksis-view', PraksisView);

Как вы можете видеть здесь, я загружаю некоторые тестовые данные из testData.json.

Теперь другой sdk-article: 

import {LitElement, html} from '@polymer/lit-element';


class SdkArticle extends LitElement {
    static get properties() {
        return {
            data: {type: Object}
        };
    }

    constructor() {
        super();
        this.data = {};
    }

    render() {
        this.generateHtml();
        return html`
    `;
    }

    generateHtml(){
        console.log(this.data);
    }
}

customElements.define('sdk-article', SdkArticle);

По сути, это просто проверяет, есть ли данные.

Когда я запускаю это, данные undefined, и я получаю сообщение об ошибке: 

VM1588:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at fromAttribute (updating-element.js:59)
    at Function._propertyValueFromAttribute (updating-element.js:259)
    at HTMLElement._attributeToProperty (updating-element.js:387)
    at HTMLElement.attributeChangedCallback (updating-element.js:343)
    at AttributeCommitter.commit (parts.js:79)
    at AttributePart.commit (parts.js:111)
    at TemplateInstance.update (template-instance.js:40)
    at NodePart.__commitTemplateResult (parts.js:248)
    at NodePart.commit (parts.js:189)

Кто-нибудь может увидеть в чем проблема?

1 Ответ

1 голос
/ 19 июня 2020

Решение

если вы хотите передать фактическое свойство, вам нужно использовать «точечную нотацию». 

<sdk-article .data=${article}></sdk-article>

это в основном то же самое как при выполнении 

document.querySelector('sdk-article').data = article;

Объяснение проблемы

В текущем коде вы устанавливаете атрибут. 

<sdk-article data=${article}></sdk-article>

что в основном это 

document.querySelector('sdk-article').setAttribute('data', article);

Атрибуты, однако принимают только строки.

...