Aframe Custom Component Update Function Not Firing

Question

The update function of a custom component I wrote is not firing when "setAttribute" is used and I'm not sure why.

Initially, I thought this might be because I was creating the custom "box-door" entities separately and changing attributes before putting them into my a-scene, but the update function still failed to fire even after I waited till these entities were placed in a-scene.

I also have tried using the event listener specified here update is not firing in aframe component, but did not see any debug messages from the listener.

The only output I see is a single "UPDATE FUNCTION HIT" message after a "box-door" entity is initialized. I never see the output again despite all the setAttribute calls as seen below.

Here is my component definition (note that recreate_walldoor creates the mesh and initializes the object as desired):

AFRAME.registerComponent('box-door', {

schema: {
    width: {type: 'number', default: 10},
    height: {type: 'number', default: 5},
    depth: {type: 'number', default: 1},
    doorwidth: {type: 'number', default: 3},
    doorheight: {type: 'number', default: 4},
    dooroffset: {type: 'number', default: 3.5},
    color: {type: 'color', default: '#AAA'}
  },

init: function () {
    var data = this.data;
    var el = this.el;
    recreate_walldoor(el, data);

    this.el.addEventListener('componentChanged',function(e){
        console.log("LISTENER TRIGGERED");
    });

  },

    /*
   * Update the mesh in response to property updates.
   */
  update: function (oldData) {
    var data = this.data;
    var el = this.el;

    console.log("UPDATE FUNCTION HIT...");

    // If `oldData` is empty, then this means we're in the initialization process.
    // No need to update.
    if (Object.keys(oldData).length === 0) { console.log("exit"); return; }

    // Geometry-related properties changed. Update the geometry.
    if (data.width !== oldData.width ||
        data.height !== oldData.height ||
        data.depth !== oldData.depth) {
        console.log("DIMENSION CHANGE DETECTED");
        recreate_walldoor(el, data);
    }

    // Material-related properties changed. Update the material.
    if (data.color !== oldData.color) {
      el.getObject3D('mesh').material.color = data.color;
    }
  }
});

Here is roughly how the attribute change occurs (this looks unnecessarily convoluted but it's because I am mixing together code across files to simplify the workflow):

let div = document.createElement('a-entity');
var wall = document.createElement('a-entity');
wall.setAttribute('box-door', "");
wall.setAttribute('height', roomProps.h);
wall.setAttribute('width', roomProps.w);
wall.setAttribute('depth', roomProps.d);
wall.setAttribute('position', roomProps.center.clone().add(offset));
wall.setAttribute('rotation', {x:0, y:90.00 - theta*i, z:0});
wall.setAttribute('static-body', physics);
div.appendChild(wall);
ascene.appendChild(div);

Answer 1

It's because you update the entity attributes but not the data of the box-door attribute.

To do this you would need something like :

wall.setAttribute("box-door", {width: roomProps.w, height: roomProps.h});
// or
wall.setAttribute("box-door", "depth: " + roomProps.d);

Then it will fire the update function of the box-door component. Like Diego Marcos said, it would be easier if you provide a glitch example to run and edit :)