update-element.js 中的 Lit-Element 數據加載錯誤

Question

我有以下元素：

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)

誰能看到這里有什么問題？

Answer 1

解決方案

如果要傳遞實際屬性，則需要使用“點表示法”。

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

然而，屬性只接受字符串。