设置值时未触发纸张输入更改事件

Question

I add an eventListener for the change-event to a bunch of paper-inputs .

Now when I change manually (by click or typing) the value of the paper-input the event fires as expected, but when I set the value through code, the zero is visible inside the input but the event doesn't fire.

Code:

for(var i = 0; i<this.children.length; i++){
  this.children[i].children[0].set('value',0);
  this.children[i].children[0].addEventListener('change', function(e){
    e.detail = {"name" : e.srcElement.name,
                "value": e.srcElement.value
               }
    pushToChecked(e);
  })
}

I call the following function to reset all my inputs when needed:

_setToZero : function(){
  for(var i = 0; i<this.children.length; i++){
    this.children[i].children[0].set('value',0);//should fire change-event  
  }
}

this.children[i] looks like this:

<div class="obj-input">
  <paper-input class="paper-number" type="number" min="0" name="test">
  </paper-input>
</div>

Any Ideas? Help would be greatly appreciated.

Just ask me if you need to see more code.

Answer 1

Typical <input> does not fire change event when value is changed from code, so I believe <paper-element> is expressing the platform behavior.

However, <paper-element> will fire (non-bubbling) value-changed event that you can use instead.

 <base href="http://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="paper-input/paper-input.html"> <style> body { font-family: sans-serif; } </style> <x-example></x-example> <dom-module id="x-example"> <style> :host { display: block; } </style> <template> <paper-input placeholder="input" on-change="change" on-value-changed="valueChanged" value="{{value}}"></paper-input> <button on-tap="changeValue">Change Value</button> </template> <script> // only need this when in the main document and on non-Chrome addEventListener('WebComponentsReady', function() { Polymer({ is: 'x-example', changeValue: function() { this.value = Math.floor(Math.random() * 1000); }, change: function() { console.log('got _change_ event'); }, valueChanged: function() { console.log('got _value-changed_ event'); } }); }); </script> </dom-module> 

Note: check the console to see the events fire if you run the snippet.