Add Eventlistener dynamically on vaadin combobox in Polymer Datatable - combobox

Question

I try to listen on changes made in a vaadin combobox (value) inside an iron-data-table.
This is my complete Datatable:
<iron-data-table id="grid4" items="[[riskCombined]]" selection-enabled on-selected-items-changed="_selected" >
<data-table-column name="#" width="20px" flex="0">
<template>
<div class="index">[[item]]</div>
</template>
</data-table-column>
<data-table-column name="Risk" width="140px" flex="0">
<template>[[item.name]]</template>
</data-table-column>
<data-table-column name="State" width="100px" flex="0">
<template><vaadin-combo-box value=[[item.state]] items=[[item.settings]] on-value-change="valueChanged" id=combobox[[index]]> </vaadin-combo-box></template>
</data-table-column>
</iron-data-table>
I want to listen on value changes:
<data-table-column name="State" width="100px" flex="0">
<template>
<vaadin-combo-box value=[[item.state]] items=[[item.settings]] on-value- change="valueChanged" id=combobox[[index]]> </vaadin-combo-box>
</template>
</data-table-column>
I'm adding an eventlistener:
<script>
var combobox = document.querySelector('vaadin-combo-box');
combobox.addEventListener('value-changed', function(event) {
console.log(event.detail.value);
});
combobox.addEventListener('selected-item-changed', function(event) {
console.log(event.detail.value);
});
</script>
also tried with:
document.getElementById(...)
The problem is that the Eventlistener is just added to the first combobox. But since there are multiple boxes dynamically created, this doesn't work. How can I dynamically add the Eventlistener to multiple comboboxes? Or is there an other solution?
Edit: tried this:
valueChanged: function(event) {
console.log(event.detail.value);
}
Edit 2:
changed
on-value-change="valueChanged"
to
on-value-changed="valueChanged"
Now edit1 is working! But its firing already when the page loads the first time an sets the values of the combobox...

Answer 1

The correct way is to use the on-value-changed (notice the changeD) attribute inside the template. Using querySelector is unreliable since there might be new elements being added later on the the table is scrolled.
Because the elements are being recycled and reused, there's a new value being bound to the <vaadin-combo-box> elements when scrolling – hence firing value-changed events everytime a row is recycled.
Assuming you want the user to be able to change the item.state property, I suggest you instead bound that property two-way with value="{{item.state}}" and add a listener for the event item-changed.
See my example here: http://jsbin.com/heroqu/edit?html,console,output
The item-changed seems to be fired always twice, but it should still be OK to use.

Answer 2

Vaadin-combo-box already fires value-changed event when value changes. You can listen to value-changes event instead of creating your own event. Here's the documentation for vaadin-combo-box.
listeners:{'value-changed':'valueChanged'},
valueChanged:function(e){
//code goes here
}