using map to trigger vue reactive property

button-inc · Oct 4, 2023 · e6fa2e2 · e6fa2e2
1 parent fc1f9a5
commit e6fa2e2
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/app_vue/src/components/sensorMapMarker.vue b/app_vue/src/components/sensorMapMarker.vue
@@ -15,7 +15,6 @@ const props = defineProps({
 
 // set html element variables
 const state = reactive({
-  iconUrl: '',
   linearProgressColor: '',
   fillPercent: 0,
   isAlreadyInRoute: false,
@@ -28,7 +27,6 @@ const { getSelectedRouteList, getShouldDisplayRoute } = storeToRefs(routeStore);
 
 onBeforeMount(() => {
   const binIconName = getBinIconName(props.sensor);
-  state.iconUrl = getIconUrl(binIconName);
   state.linearProgressColor = getVuetifyLinearProgressColor(binIconName);
   state.fillPercent = Math.round(props.sensor.fill_level || 0);
 });
@@ -71,7 +69,7 @@ function removeBinFromRoute(sensor) {
   <l-icon
     :icon-size="[19, 23]"
     :icon-anchor="[10, 18]"
-    :icon-url="state.iconUrl"
+    :icon-url="getIconUrl(getBinIconName(props.sensor))"
   />
 
   <l-popup class="popup">

diff --git a/app_vue/src/stores/sensors_store.js b/app_vue/src/stores/sensors_store.js
@@ -65,7 +65,7 @@ export const useSensorStore = defineStore('sensors', {
       this.selectedMaterialType = materialType;
     },
     updateSensorsWithFilters() {
-      this.sensors.forEach((sensor) => {
+      this.sensors.map((sensor) => {
         // filter for fill range
         const fillRangeFilter = () => {
           if (this.selectedFillRange && (sensor.fill_level || sensor.fill_level === 0)) {
@@ -114,8 +114,9 @@ export const useSensorStore = defineStore('sensors', {
           return true;
         };
 
-        // combining results of all filters together
+        // setting up new property
         sensor.keepAfterFiltering = fillRangeFilter() && groupFilter() && assetTagFilter() && binTypeFilter() && binVolumeFilter() && materialTypeFilter();
+        return sensor;
       });
     }
   }