how to destroy or block mount events in mounted() vuejs

Question

I'm making a wrapper component so I need to add all the events in mounted() methods. However the thing is, as it's another component, whenever I open that component, event is triggered. I'm not sure how to block it. Even I made it to be triggered when the component is clicked, but it didn't work. It only works for the first mount. After re-open it(from second mount), it just keep triggers all the event and I have to block it.

Is there a way that I can block to not to trigger events in mounted() hook for vuejs?

EDITED: I'm making leaflet-draw wrapper. all the events are from leaflet-draw doc.

this.addnew() is the one being triggered.

objectLayer.on("layeradd", (e) => {
        let layer = e.layer;
        layer.on("click", onClickFeatureSelct, layer);

    if (typeof layer.options.id === "undefined") {
      layer.options.id = L.Util.stamp(layer);
    }

    if (!layer.feature) {
      let json = layer.toGeoJSON();
      layer.feature = L.GeoJSON.asFeature(json);
    }

    let properties = layer.feature.properties;
    let keyvalue = L.stamp(layer);

    if (layer instanceof L.NodeCircle) {
      let latlng = layer.getLatLng();

      itemType = "node";

      let nodes = this.$store.getters.nodeList;

      let result = false;
      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].keyvalue == keyvalue) {
          result = true;
        } else {
          result = false;
        }
      }
      if (!result) {
        console.log('layer added')
        // this.addNew(latlng, itemType, keyvalue);
      }

      if (!properties.NODE_ID) {
        properties.NODE_ID = parseInt(this.newNodeId);
        properties.NODE_NAME = "-";

        this.addedNodes.push(properties.NODE_ID);

        layer.bindTooltip(properties.NODE_NAME + "<br>(" + properties.NODE_ID.toString() + ")");
        nodeObj[keyvalue.toString()] = layer;
      }

      // console.log('added nodes', this.addedNodes)

          if (!nodeLayer.hasLayer(layer)) nodeLayer.addLayer(layer);
 }
      });

how do you register events in mounted hook and which events? and how you trigger the events? — Sphinx
Can you show some of the code? What do these mounted methods look like? — Daniel Elkington

Chawchawchaw Chawchawchaw · Accepted Answer · 2020-12-21T02:05:06

Well, As this question got 5 ups, to people who's facing same issue just like me. Here is How I did...

Vue.js mount order when components are related. Child Component -> Parent Component
Adding this.$nextTick() didn't work.
Even it's a SPA Web application. There is no way to NOT to trigger events when they're in the child component. So I just made it to reload..... I know it's not a good idea to do it but I couldn't find the any other way to fix it. However, I think adding flags to parent component and trigger that event when parent is ready might gonna work.
I will re-try this logic once again and let you know how I've done afterwards. It won't be that soon. Sorry.

how to destroy or block mount events in mounted() vuejs

1 Answers