more Vue 3 fixes

limenet · Mar 14, 2021 · d927afd · d927afd
1 parent 2e81dbe
commit d927afd
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/src/components/UI/Marker.js b/src/components/UI/Marker.js
@@ -82,17 +82,15 @@ export default {
 
     this.marker = new marker(markerOptions);
 
-    if (this.$attrs["onUpdate:coordinates"]) {
-      this.marker.on("dragend", event => {
-        let newCoordinates;
-        if (this.coordinates instanceof Array) {
-          newCoordinates = [event.target._lngLat.lng, event.target._lngLat.lat];
-        } else {
-          newCoordinates = event.target._lngLat;
-        }
-        this.$emit("update:coordinates", newCoordinates);
-      });
-    }
+    this.marker.on("dragend", event => {
+      let newCoordinates;
+      if (this.coordinates instanceof Array) {
+        newCoordinates = [event.target._lngLat.lng, event.target._lngLat.lat];
+      } else {
+        newCoordinates = event.target._lngLat;
+      }
+      this.$emit("update:coordinates", newCoordinates);
+    });
 
     this.$_bindSelfEvents(markerEvents, this.marker);
 
@@ -151,5 +149,5 @@ export default {
       [this.$slots.marker, this.marker ? this.$slots.default : null]
     );
   },
-  emits: ["removed", "added"]
+  emits: ["removed", "added", "dragend", "update:coordinates"]
 };
diff --git a/src/components/layer/GeojsonLayer.js b/src/components/layer/GeojsonLayer.js
@@ -89,7 +89,7 @@ export default {
   created() {
     if (this.source) {
       this.$watch(
-        "source.data",
+        () => this.source.data,
         function(next) {
           if (this.initial) return;
           this.mapSource.setData(next);

diff --git a/src/components/layer/ImageLayer.js b/src/components/layer/ImageLayer.js
@@ -9,7 +9,7 @@ export default {
     if (this.source) {
       if (this.source.coordinates) {
         this.$watch(
-          "source.coordinates",
+          () => this.source.coordinates,
           function(next) {
             if (this.initial) return;
             if (next) {
@@ -22,7 +22,7 @@ export default {
 
       if (this.source.url) {
         this.$watch(
-          "source.url",
+          () => this.source.url,
           function(next) {
             if (this.initial) return;
             if (next) {

diff --git a/src/components/layer/VideoLayer.js b/src/components/layer/VideoLayer.js
@@ -15,10 +15,13 @@ export default {
 
   created() {
     if (this.source && this.source.coordinates) {
-      this.$watch("source.coordinates", function(next) {
-        if (this.initial) return;
-        this.mapSource.setCoordinates(next);
-      });
+      this.$watch(
+        () => this.source.coordinates,
+        function(next) {
+          if (this.initial) return;
+          this.mapSource.setCoordinates(next);
+        }
+      );
     }
     this.$_deferredMount();
   },

diff --git a/src/components/layer/layerMixin.js b/src/components/layer/layerMixin.js
@@ -72,22 +72,28 @@ export default {
 
   created() {
     if (this.layer.minzoom) {
-      this.$watch("layer.minzoom", function(next) {
-        if (this.initial) return;
-        this.map().setLayerZoomRange(this.layerId, next, this.layer.maxzoom);
-      });
+      this.$watch(
+        () => this.layer.minzoom,
+        function(next) {
+          if (this.initial) return;
+          this.map().setLayerZoomRange(this.layerId, next, this.layer.maxzoom);
+        }
+      );
     }
 
     if (this.layer.maxzoom) {
-      this.$watch("layer.maxzoom", function(next) {
-        if (this.initial) return;
-        this.map().setLayerZoomRange(this.layerId, this.layer.minzoom, next);
-      });
+      this.$watch(
+        () => this.layer.maxzoom,
+        function(next) {
+          if (this.initial) return;
+          this.map().setLayerZoomRange(this.layerId, this.layer.minzoom, next);
+        }
+      );
     }
 
     if (this.layer.paint) {
       this.$watch(
-        "layer.paint",
+        () => this.layer.paint,
         function(next) {
           if (this.initial) return;
           if (next) {
@@ -102,7 +108,7 @@ export default {
 
     if (this.layer.layout) {
       this.$watch(
-        "layer.layout",
+        () => this.layer.layout,
         function(next) {
           if (this.initial) return;
           if (next) {
@@ -117,7 +123,7 @@ export default {
 
     if (this.layer.filter) {
       this.$watch(
-        "layer.filter",
+        () => this.layer.filter,
         function(next) {
           if (this.initial) return;
           this.map().setFilter(this.layerId, next);