在聚合物中正确设置 vaadin-combo-box 标签和值

Question

我尝试将这个示例 this 实现到聚合物中，因为我需要在输入中显示标签。

我刚试过

1. html：

    <div id='comp' class="item">
        <form id="formC">   
 <div class="item-label edit">
   <iron-ajax url="/url" last-response="{{resp}}" auto></iron-ajax>

   <vaadin-combo-box id="Box" name="Box" selected-item="{{label}}" 
   placeholder="Please select" items="[[resp]]" item-value-path="label" 
   item-label-path="label" value$='[[data.label]]' name='label' > 
   </vaadin-combo-box>
 </div>                                                                
 <div class="item-valu edit">
      <input size="8" name="valu" value$='[[data.valu]]'>
 </div>
        </form>             
    </div>

1. 脚本

        ready(){
            const combobox = Polymer.dom(this.root).querySelector('vaadin-combo- 
     box');
            combobox.items = [
    {label: 'One', nilai: 1},
    {label: 'Two', nilai: 2},
    {label: 'Three', nilai: 3}
  ];
        combobox.addEventListener('selected-item-changed', function() {
         alert("selected-item-change" + JSON.stringify(combobox.selectedItem));
        });
         combobox.addEventListener('value-changed', function() {
         alert("value-change" + combobox.nilai );         
        });
        }

在组合框addEventListener 上有一个错误Uncaught TypeError: Cannot read property 'addEventListener' of null 但错误来自queryselector

更新 1.：使用 Polymer.dom(this.root).querySelector 的 querySelector 成功

更新 2.：仍然不明白为什么 combobox.nilai '未定义'

更新 3.：它可以工作 combobox.selectedItem.nilai ^^ 天哪，谢谢大家.. 现在我只需要注入价值

Answer 1

上面提到的hmtl 是否位于<template> 下？换句话说，你是在创建一个 Shadow DOM 吗？

如果是这样，document.querySelector('vaadin-combo-box'); 您正在“轻” DOM 中寻找组合框，显然那里没有组合框，因此返回 null。因此，当您尝试将侦听器添加到 null 时，会引发错误

否则，具有comp id 的组件是什么？您需要以相同的方式访问您的组合框。

这里有类似话题的讨论：

• Polymer: How to add event listeners to custom polymer element under conditional template
• Polymer automatic node finding with dynamic id value
• How to query elements within shadow DOM from outside in Dart?
• Github : this.$ vs. this.shadowRoot.querySelector

此外，官方文档中的示例可能会有所帮助：Handle and fire events