我尝试实现这个例子 this进入 polymer ,因为我需要将标签显示到输入中。
我刚试过
- 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>
- 脚本
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 'undifined'
更新 3.:combobox.selectedItem.nilai 有效 ^^ thx god, thx everyone .. 现在我只需要注入(inject)值
最佳答案
是否 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
关于javascript - 在 polymer 中正确设置 vaadin-combo-box 标签和值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56336429/