vaadin 23：addpropertychangelistener用于JavaScript更改

Question

预期的：在Vaadin 23应用程序中，当更改HTML属性的值时，我想知道。

我尝试的：我创建了此输入公式：

    // Text input field
    Input input = new Input();
    input.setId("myInputField");
    Element textInput = input.getElement();
    
    // Change listener for property "value"
    // Works well for manual input
    // BUT doesn't work for JavaScript changes
    textInput.addPropertyChangeListener("value", "change", 
        e -> {System.out.println(e.getValue());}
    );
    
    // Button that changes the value of attribute "value"
    Button button = new Button("Change value");
    button.addClickListener(e -> {UI.getCurrent().getPage().executeJs(
        "document.getElementById('myInputField').setAttribute('value','hello');"
    );});

    this.add(input, button);

什么工作：当用户在输入字段中键入“某物”时，服务器会打印控制台的“东西”。这是打算和观察的。好的。

什么不起作用：当用户按下按钮时，输入字段的内容为“ Hello”（OK）。但是属性ChangeListener不会发射事件，因此服务器不会向控制台打印任何东西。

问题：即使JavaScript已更改了属性的值，是否有办法使属性Changelistener射击事件？

Answer 1

我在这里看到两个问题。

首先，vaadin流中的服务器端属性更改侦听器需要由客户端事件触发。当用户直接更改字段中的值时，＆lt; input＆gt;元素会触发事件，而不是通过编程更改值时。如果您从代码更改值，则还需要手动触发事件以触发更新。

其次，正如评论中指出的那样，您应该更改属性而不是属性。在大多数情况下，具有相同名称的属性和属性是同步的，但是输入的值是例外。在这里，属性是初始值，属性是实际值。如果您仅更改属性，则保持不变，但是在用户通过UI编辑或更改属性之后差异。