Question

我试着听一下铁数据表中的vaadin组合框（值）所做的更改。

这是我完整的数据表：

<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>

我想听取价值变化：

  <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>

我添加了一个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>

也尝试过：

document.getElementById(...)

问题是Eventlistener刚刚添加到第一个组合框中。但由于动态创建了多个框，因此无法正常工作。如何将Eventlistener动态添加到多个组合框中？或者还有其他解决方案吗？

编辑尝试了这个：

valueChanged: function(event) {
        console.log(event.detail.value);
      }

编辑2：

已更改

on-value-change="valueChanged"

到

on-value-changed="valueChanged"

现在edit1正在运行！但是当页面第一次加载时，它已经开始设置组合框的值......

Answer 1

正确的方法是在模板中使用on-value-changed（注意changeD）属性。使用querySelector是不可靠的，因为稍后可能会滚动表格中添加的新元素。

由于元素正在被回收和重用，因此在滚动时会有一个新值绑定到<vaadin-combo-box>元素 - 因此每次回收行时都会触发value-changed个事件。

假设您希望用户能够更改item.state属性，我建议您使用value="{{item.state}}"双向绑定该属性，并为事件item-changed添加一个侦听器。

请参阅我的示例：http://jsbin.com/heroqu/edit?html,console,output

item-changed似乎总是两次被解雇，但使用它仍然可以。

Answer 2

当value-changed发生变化时，

Vaadin-combo-box已经触发value事件。您可以收听value-changes活动，而不是创建自己的活动。 vaadin-combo-box的文档Here's。

listeners:{'value-changed':'valueChanged'},
valueChanged:function(e){
  //code goes here
}

在Polymer Datatable中的vaadin组合框上动态添加Eventlistener

2 个答案: