您可以在上传中使用 vaadin 按钮吗？

编程问答 2022-04-30

问题描述

所有上传示例都显示在以编程方式创建上传时使用 NativeButton。我想使用作为设计器布局一部分的按钮（vaadin-button）。当我尝试这个时，我看到以下错误：

Caused by: java.lang.IllegalArgumentException: Trying to detach an element from parent that does not have it.
    at com.vaadin.flow.dom.impl.AbstractNodeStateProvider.removeChild(AbstractNodeStateProvider.java:123)
    at com.vaadin.flow.dom.Node.removeChild(Node.java:376)
    at com.vaadin.flow.dom.Element.removeFromParent(Element.java:577)
    at com.vaadin.flow.dom.Node.insertChild(Node.java:293)
    at com.vaadin.flow.dom.Node.appendChild(Node.java:141)
    at com.vaadin.flow.component.upload.GeneratedVaadinUpload.addToAddButton(GeneratedVaadinUpload.java:1344)
    at com.vaadin.flow.component.upload.Upload.setUploadButton(Upload.java:276)

我们在 CDI 模式下使用 Vaadin 14。

解决方法

使用 Designer 更改上传按钮，需要将按钮拖入层次结构中的上传，然后添加 slot="add-button" 属性。

您的模板最终应如下所示：

<vaadin-upload>
 <vaadin-button slot="add-button">
   Button 
 </vaadin-button>
</vaadin-upload>

请注意，您必须在层次结构面板中执行此操作。 enter image description here

如果这没有帮助（也许您已经这样做了），您能否包含一些代码来显示您正在尝试做什么？

,

我刚刚在我们的 Designer 存储库 https://github.com/vaadin/designer/issues/2399 中针对此改进创建了一个问题。

欢迎发表评论。

vaadinvaadin-designervaadin-flowvaadin14