Polymer 3中vaadin-combo-box通过dom-repeat绑定选项失效问题

API 探路者

2026-9-1

问题诱因

vaadin-combo-box是独立封装的自定义表单组件，并非原生<select>元素的扩展。它仅会在初始化阶段读取一次已经存在的静态子<option>节点，转换为内部选项数据，这也是写死固定选项能正常运行的原因；但组件没有实现子节点动态变化的监听逻辑，完全不支持运行时通过内嵌<option>+dom-repeat循环的方式渲染动态选项。组件内部自带独立的选项渲染、虚拟滚动、筛选逻辑，dom-repeat异步渲染生成的option节点是在组件初始化完成后才插入DOM的，既不会被组件读取为选项数据，反而会干扰组件默认渲染流程，导致功能异常。
你提供的代码存在基础语法错误：<template is="dom-repeat">标签没有对应的闭合标签</template>，模板本身就无法被Polymer正常解析执行。
就算补全模板闭合标签，这种写法也不符合组件API设计：vaadin-combo-box的动态选项必须通过组件自身暴露的items属性传入，没有做动态子option节点的同步兼容。

修复方案

第一步：移除组件内部所有自行编写的dom-repeat模板和<option>标签，不要用原生select的思路使用该组件。
第二步：直接将动态选项数组绑定到组件自带的items属性上，通过组件提供的两个路径属性匹配原有业务逻辑：
- item-value-path：指定选项对象中作为表单提交值的字段名，对应原有value$="{{item.id}}"的逻辑
- item-label-path：指定选项对象中作为下拉显示文本的字段名，对应原有{{item.type}}的显示逻辑

基础可用的代码示例：

<vaadin-combo-box
  id="select"
  placeholder="Please select"
  items="[[items]]"
  item-value-path="id"
  item-label-path="type"
  value="{{selectedValue}}">
</vaadin-combo-box>

说明：如果不需要双向同步选中值，value="{{selectedValue}}"可以省略；选项数组绑定用Polymer单向绑定语法[[]]即可满足渲染需求。

如果你需要保留原有代码里选项文本前的两个空格缩进、或者要实现更复杂的自定义选项DOM结构，不需要手动写dom-repeat，直接使用组件预留的item模板插槽即可，组件内部会自动遍历传入的items数组完成渲染：

<vaadin-combo-box
  id="select"
  placeholder="Please select"
  items="[[items]]"
  item-value-path="id">
  <template>
    &nbsp;&nbsp;[[item.type]]
  </template>
</vaadin-combo-box>

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