如何为vaadin-combo-box组件设置默认选中值？

你可以通过以下两种方式给vaadin-combo-box设置默认选中值：

• 方式一：绑定value属性为目标选项的value值
  你需要默认选中的「Label 1」对应value为label1，直接给组件添加.value属性绑定即可，修改后的代码如下：

import {customElement} from 'lit/decorators.js';
import {html, LitElement} from 'lit';

const items = [
  {'label': 'Label 1', 'value': 'label1'},
  {'label': 'Label 2', 'value': 'label2'},
];

@customElement('my-element')
export class MyElement extends LitElement {
  render() {
    return html`
      <vaadin-combo-box
          label="combo box"
          .items="${items}"
          .value="${'label1'}"
          required
      >
      </vaadin-combo-box>
    `;
  }
}

• 方式二：绑定selectedItem属性为目标选项对象
  如果你需要直接从items数组中取对应项作为默认值，可以直接绑定.selectedItem属性，修改示例如下：

<vaadin-combo-box
    label="combo box"
    .items="${items}"
    .selectedItem="${items[0]}"
    required
>
</vaadin-combo-box>

两种方式效果一致，你可以根据实际业务场景选择使用。

内容的提问来源于stack exchange，提问作者dede