在List-Element Web组件中获取异步数据

我正在学习如何使用Fetch API和Lit-Element：

获取Web组件中的异步数据

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

class WebIndex extends LitElement {

    connectedCallback() {
        super.connectedCallback();
        this.fetchData();

    }

    fetchData() {
        fetch('ajax_url')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                };
                response.json();
            })
            .then(data => {
                this.data = data;
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    }

    render() {
        if (!this.data) {
            return html`
                <h4>Loading...</h4>
            `;
        }
        return html`
            <h4>Done</h4>
        `;
    }

}

customElements.define('web-index', WebIndex);

但是，呈现的html从不更改。我做错了什么？这是在Web组件中提取异步数据的最佳方式吗？

---

解决方案

您需要在组件属性中注册data，以便在更改数据值时调用呈现

static get properties() {
   return {
     data: Object
   }
}

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