Thanks, will check that

English please
What do you mean by “you should debounce your recalculate function”?

I’m watching the 2 props

watch: {
    prop1: function() {
        this.getCalc();
    },
    prop2: function() {
        this.getCalc();
    }
},

    getCalc() {
        this.calc = prop1 / prop2 * 100;
    },

This works but it works twice, once when prop1 is being updated and once when prop2 is being updated so there’s a short flickering on the screen with a wrong number.

I need both props to be updated and only then, call getCalc.
Thanks

but it will bring me back to square 1 where a change on each property will trigger the computed calculation.
Maybe I will move this part to the server as well.

The watcher works great but… Is there a way to watch 2 properties?
I have 3 functions (Y changes immediately so no need to watch it)
1 use X and Y
2 use X
3 use X and Z

1 and 2 can happen by watching X
but 3 should happen by watching X and Z because sometimes X returned first and sometimes Z.
How can this be done?
Thanks

ok, found this: https://flaviocopes.com/vue-watchers/
now the question is whether this is the good practice for this kind of scenario, thanks

It was a method and the same problem happened, I thought a computed will work but it didn’t.
Where can I read about the watcher for only value2?

Hi

I have 2 properties: value1 and value2. I have a computed value:

divideValues { return value1 / value2}

in html:

result -> {{ divideValues }}

On a certain event, value1 is changed, then an axios call is made (with value1 as a parameter) and the response changes value2. Meaning, value1 changes value and only after that value2 changes. This is causing the computed to be calculated twice and rapidly. This is causing a flickering in the GUI and if the call is a bit slow, the user sees incorrect values for a short period of time.

My question: how can I make the refresh only after the 2 values are updated?
I thought of using a “middle man” property and change both value1 and value2 in the call’s response but that would also cause a double computing, once per valueX change.

How can I avoid this?
Thanks

@rab
The emit solution does not reload the page, it simply calls (again) the methods that use axios calls that refresh the data in the client.

in page:

mounted() {
        this.$root.$on('set-start-everything',this.startEverything);
    },

in methods

startEverything(includeTotals) {
                 if (includeTotals)
                     this.getData1();
                this.getData2();
                this.getData3();
            }
        }

and in layout (parent), when the data is updated

this.$root.$emit('set-start-everything', true );

emit works as expected. If this is a hack and there’s a better/cleaner way to achieve this, let me know.
Thanks