Vue3 – Function that changes a property input

  javascript, vue-component, vue.js, vuejs3

I am currently building a Vue application utilizing a map. The functionality is basically this. I have a position on the map and an algorythm to determine weather that position is over water or over land. If it is over water I want to reiterate over random positions nearby until my position is over land and return those coordinates. So basically my (very rudimentary for testing it out first) code looks similar to this

snippet from template

<mapbox-marker :lngLat="getPositionOverLand([0,5])" />

corresponding code

const getPositonOverLand = (coords: any, tries=100) => {
      
const newCoords = [coords[0], coords[1]] as [number, number];
      let thisTry = 0;
      while(isOverWater(newCoords) && thisTry < tries){
        newCoords[0] = coords[0] + (Math.random() - 0.5)*0.5
        newCoords[1] = coords[1] + (Math.random() - 0.5)*0.5
        thisTry++;
      }
      if(thisTry === tries)
        throw new Error('No position on land nearby could be found');
  

      coords[0] = newCoords[0];
      coords[1] = newCoords[1];
    }

Now I debugged the algorythm and it works just fine. Usually after 5 or so attempts a position on land has been found and is returned. I also implemented a parameter for maximum tries so if a position on the open ocean e.g. is beeing put in an error is thrown after a certain number of attempts.

Now my problem in vue is this. If I change the coordinates in my function (it does not matter if I use a return statement or change the coordinates in the array) the function will be triggered again leaving me with an infinite loop.

Is there any possibility to prevent that behaviour and make sure the algorythm will only be run once or did I miss something else.

Strangly I also tried to just return the given coords just for testing and this does not cause an infinite loop.

Source: Ask Javascript Questions

LEAVE A COMMENT