Magento 2.1.2 : how to trigger UI Component onUpdate() on load

Question

I currently have a UI Component (which extends the default select-component), and I want to do something when the select changes it's value. So I use the onUpdate()-method to hook into this:

define([
  'underscore',
  'Magento_Ui/js/form/element/select'
], function (_, SelectComponent) {
  "use strict";

  /**
   * Manipulate the default select component
   */
  return SelectComponent.extend({
    /**
     * Method fired when a different option is picked
     */
    onUpdate: function () {
      this._super();

      // do stuff here 

      }
    }
  });
});

Now, when creating new entities the onUpdate() is triggered. When I change values the onUpdate() is triggered. But as soon as I have an already existing entity the onUpdate()-method is not triggered on page load.

Anyone knows what might be causing this?

Answer 1

If I've understood this correctly you have added a function to onUpdate which works fine, but it isn't working on page load?

If this is the case then it's because you have only informed the browser so run your code when a change occurs, if you want it to happen on page load you'll also need to do it on initialisation like so:

initialize: function () {
    this._super();

    // Your code here

    return this;
},

And your code isn't waiting for page load, if you want this to happen you need to add domReady! as a dependency.

Answer 2

You can trigger the onUpdate function on initialization, like below:

initialize: function () {
    this._super();

    // trigger onUpdate on initialization
    this.onUpdate(this.value());

    return this;
},

PS: I do not have the reputation to add comments on the above answer.