1

我尝试听取在铁数据表内的 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>

我正在添加一个事件监听器：

 <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正在工作！但是当页面第一次加载并设置组合框的值时，它已经触发了......

4

2 回答 2

0

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

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

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

在这里查看我的示例：http: //jsbin.com/heroqu/edit ?html,console,output

似乎总是被item-changed触发两次，但它应该仍然可以使用。

于 2016-08-17T08:03:09.783 回答
-1

Vaadin-combo-box 已在更改value-changed时触发事件。value您可以收听value-changes事件而不是创建自己的事件。这是vaadin-combo-box.

listeners:{'value-changed':'valueChanged'},
valueChanged:function(e){
  //code goes here
}
于 2016-07-10T08:18:27.263 回答