我正在尝试在网页上使用 vaadin Web 组件。在 POST 上，组件 vaadin-combo-box 发送选定的标签，而不是值；并且 vaadin-select 不在 POST 值中。
最新 vaadin 24.3.10 组件（在 Caddy 代理后面的 Bun / Elysia 上）
我将代码缩小到这个较小的页面进行测试。它包括 4 个 vaadin 组件：文本字段、单选组、选择和组合框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vaadin Debug</title>
<!-- include all vaadin core components -->
<script type="module" src="/assets/vaadin-resources.js"></script>
<link rel="stylesheet" href="/assets/styles/styles.css">
</head>
<body style="font-family: var(--lumo-font-family); color: var(--lumo-body-text-color); background-color: var(--lumo-base-color);"></body>
<div style="width:600px; margin: 0 auto" class="border border-contrast-80 border-primary bg-base rounded-l shadow-m">
<div class="">
<form id="myForm" name="object-form" action="/partials/object/Entity/0000" method="post">
<vaadin-text-field id='vaadin-text-field' name='vaadin-text-field' label='vaadin-text-field'>
</vaadin-text-field>
<vaadin-combo-box id='vaadin-combo-box' name='vaadin-combo-box' label='vaadin-combo-box'>
</vaadin-combo-box>
<script>
comboBox = document.querySelector('#vaadin-combo-box');
comboBox.items = [
{ value: 'a38e43f4-cffd-11ee-baef-1fedb4776d81', label: 'France' },
{ value: '05cc2734-f295-11ee-bcda-239311358179', label: 'Germany' },
{ value: '05d11b40-f295-11ee-bcda-674883960b70', label: 'Spain' }
];
comboBox.value = 'a38e43f4-cffd-11ee-baef-1fedb4776d81';
console.log("vaadin-combo-box")
</script>
<vaadin-select id='vaadin-select' name='vaadin-select' label='vaadin-select'>
</vaadin-select>
<script>
select = document.querySelector('#vaadin-select');
select.items = [
{ label: 'Label A', value: 'ce1521d8-cffd-11ee-baef-477d625ddaa8' },
{ label: 'Label B', value: 'ce2e4046-cffd-11ee-baef-93b6cbfb74ea' },
{ label: 'Label C', value: '45de575e-ea28-11ee-8718-df0dd9251f5f' }
];
select.value = 'ce1521d8-cffd-11ee-baef-477d625ddaa8';
console.log("vaadin-select updated")
</script>
<vaadin-radio-group id='vaadin-radio-group' name='vaadin-radio-group' label='vaadin-radio-group'>
<vaadin-radio-button value="v1" label="Value 1" checked></vaadin-radio-button>
<vaadin-radio-button value="v2" label="Value 2"></vaadin-radio-button>
<vaadin-radio-button value="v3" label="Value 3"></vaadin-radio-button>
</vaadin-radio-group>
<button type="submit">Save</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function (event) {
event.preventDefault(); // Stop the form from submitting
console.log("Values of elements");
console.log('vaadin-text-field:', document.querySelector('#vaadin-text-field').value);
console.log('vaadin-combo-box:', document.querySelector('#vaadin-combo-box').value);
console.log('vaadin-select:', document.querySelector('#vaadin-select').value);
console.log('vaadin-radio-group:', document.querySelector('#vaadin-radio-group').value);
console.log("Form values");
const formData = new FormData(this);
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
});
</script>
</div>
</div>
</body>
</html>
“保存”按钮在控制台中显示此内容：
Values of elements
vaadin-text-field: MyText
vaadin-combo-box: a38e43f4-cffd-11ee-baef-1fedb4776d81
vaadin-select: ce1521d8-cffd-11ee-baef-477d625ddaa8
vaadin-radio-group: v1
Form values
vaadin-text-field MyText
vaadin-combo-box France
vaadin-radio-group-18 v1
发布的值是错误的：
vaadin-text-field: MyText
vaadin-combo-box: a38e43f4-cffd-11ee-baef-1fedb4776d81
vaadin-select: ce1521d8-cffd-11ee-baef-477d625ddaa8
vaadin-radio-group: v1
在 gtihub 上得到答案：“vaadin-select Web 组件不支持正确提交表单，因为它没有使用元素。 考虑使用 formdata 事件手动设置与 vaadin-select 相对应的值作为解决方法。”
因此，虽然这些组件令人惊叹，但我不太确定它们应该被称为“Web 组件”，因为它们的行为并不像真正的组件。我希望 webawesome 组件能够兑现他们的承诺......