Polymer 更新元素属性绑定

我有一个基于LitElement的web组件，它呈现一个mdw对话框，其中包含一个使用父组件属性的自定义元素。当用户单击一个按钮时，将显示一个对话框，其中显示两个输入字段。这一切都很好，但我希望在显示对话框之前，每当单击按钮时，属性都重置为空对象，尽管我可以轻松地这样做，但它似乎不会对对话框元素产生影响

父元素

export class PageApplications extends LitElement {

    static get properties() {
        return {
            application: { type: Object }
        }
    }

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

    onMouseOver(event) {
        this.shadowRoot.querySelector('mwc-fab').extended = ('mouseenter' === event.type);
    }

    openDialog() {
        console.log('PageApplication.openDialog:', this.application);
        this.application = {};
        let dialog = this.shadowRoot.querySelector('mwc-dialog');
        dialog.requestUpdate;
        dialog.open = true;
    }

    closedDialog(event) {
        console.log('closedDialog:', this.application)
        if ('ok' === event.detail.action) {
            // NOP
        }
    }

    render() {
        console.log('PageApplication.render', this.application);
        return html`
            <style type="text/css">
                mwc-fab {
                    position: fixed;
                    right: 1rem;
                }
                mwc-list {
                    background-color: #FFF;
                }
            </style>
            <mwc-fab showIconAtEnd icon="add_circle" label="New Application" 
                @mouseenter="${this.onMouseOver}"
                @mouseout="${this.onMouseOver}"
                @click="${this.openDialog}"
                >
            </mwc-fab>
            <mwc-dialog heading="Create Application"
                @closed="${this.closedDialog}">
                <cnvy-create-application
                    .application="${this.application}"
                ></cnvy-create-application>
                <mwc-button
                    slot="primaryAction"
                    dialogAction="ok"
                >Create</mwc-button>
                <mwc-button
                    slot="secondaryAction"
                    dialogAction="cancel"
                >Cancel</mwc-button>            
            </mwc-dialog>
            <h2>Applications</h2>

正如所料。如果我再次单击按钮，“应用程序”属性应重置为空对象，但UI显示带有“a”和“b”的文本字段，如果我将“b”更改为“d”，则只返回“d”

closedDialog: {description: "d"}

---

这意味着应用程序对象实际上被重置为空，但这不是显示的内容。。。那么，如何触发更新？我试过各种各样的“更新”、“请求更新”。。而这样的生命周期方法却毫无用处。

mwc textfield

在内部使用本机

输入

，并将

值

属性绑定传递给它。这是从多个源（从

.value=“${This.application.name}”

和编辑文本时从DOM）更新属性的情况之一。在这种情况下，

lit html

可能不知道如何更新该值，并可能导致数据与实际显示的内容不一致。要解决这个问题，您可以使用：it

检查绑定值与活动DOM值，而不是以前的值 确定是否更新值时的绑定值

从'lit html/directions/live'导入{live}；
// ...
render（）{
返回html`
`;
}

---

在

openDialog（）尽管不需要调用它：
this.application={}足以触发更新

要防止文本字段显示
未定义
，可以在绑定中提供回退值



或使用空值初始化整个数据结构：

constructor（）{
此应用程序={
a:“”，
b:“，
// ...
};
}
非常感谢，@Umbo-这确实解决了我的问题，添加了live指令/函数。。好东西！：）很高兴我能帮忙！：）
closedDialog: {name: "a", description: "b"}

closedDialog: {description: "d"}