如何在 Vaadin Flow 中填充组件中的属性更改？答案

【问题标题】：How can i populate a change of a property in a Component in Vaadin Flow?如何在 Vaadin Flow 中填充组件中的属性更改？
【发布时间】：2019-09-19 12:38:31
【问题描述】：

我有一个小可见微调器的以下课程：

@Tag("granite-spinner")
@NpmPackage(value = "@granite-elements/granite-spinner", version = "3.0.0")
@JsModule("@granite-elements/granite-spinner/granite-spinner.js")
public class BusyComponent extends Component implements HasEnabled {
    @Override
    public void onEnabledStateChanged(boolean enabled) {
        getElement().setProperty("active", enabled);
    }
}

这在我的 MainView 中调用：

@Route("")
@PWA(name = "Project Base", shortName = "Project Base")
@Push
public class MainView extends VerticalLayout implements PageConfigurator {
    public MainView() {
        UI currUI = UI.getCurrent();
        final BusyComponent bc = new BusyComponent();
        final Button button = new Button("Click me");
        button.addClickListener(event -> {
            button.setEnabled(false);
            bc.setEnabled(true);
            new Thread(() -> {
                try {
                    Thread.sleep(3000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                currUI.access(() -> {
                    button.setEnabled(true);
                    bc.setEnabled(false);
                });
            }).start();
        });
        add(bc);
        add(button);
    }
}

按钮在我点击的那一刻被禁用并在 3 秒后启用。但 Spinner 继续旋转。不知何故，属性更改未更新。有人知道为什么吗？

【问题讨论】：

标签： web-component vaadin-flow

【解决方案1】：

TLDR；你做的一切都是对的。您的代码没有任何问题，似乎 webcomponent 对属性更改没有反应

加长版：

我已经在 Vaadin 项目之外尝试过这个 Web 组件，但不幸的是，它并没有按照您期望的方式工作。此外，它在description 中声明：

活动：布尔值 |空 |不明确的如果显示真正的微调器

（所以它并不单独暗示可见性在设置一次后更新..）

这里有一个例子JSFiddle example

因此，如果您签入 devTools，我们的 Vaadin 代码没有任何问题，并且active 属性会在单击按钮时被正确删除/添加。

似乎 web 组件在渲染一次后根本不会对属性更改做出反应。如果你查看它的实现代码，属性active 仅在render() 函数中使用Code in unpkg。

我不是 web 组件方面的专家，所以不确定它应该如何实现，但也许你可以创建一个错误报告到组件的 Github 存储库？如果您愿意，请随意重用示例 JSFiddle :)

【讨论】：