View original (French)

VueJS: calling a function in another component

Solved
arscy Posted messages 196 Status Member -  
arscy Posted messages 196 Status Member -

Hello,

If there are any VueJS (typescript) enthusiasts among you...
I'm currently struggling with a problem:
I have a view composed of two components.

I want to execute a function in component B [if and only if] a variable v is updated in component A.
I have set up a store that allows access to the variable v from both components A and B without any issues.

Naturally, I thought about implementing an event. I attempted 2 approaches using "emit" that miserably disintegrated in their own effort since VueJS apparently does not allow the use of '$on', which is not native to this code.

I then tried to create a custom event bus, and again, it didn't work (instantiating a Vue() is not validated under VueJS 3.x)

Finally, I tried using "inject/provide", which seemed like an attractive solution at first (injecting a method to make it available in another component) but it didn't work and in fact, it's more of a hassle than anything else.

I set aside props and "computed", not seeing how to take advantage of them, although I have the impression that a computed might somehow bear fruit?

I thought about trying to place a hidden form in the 2nd component to easily tie the function call, but I'm still missing the trigger to execute the function in that case.

Do you have any tips/suggestions to help me get out of this situation?
Thank you in advance.

1 answer

  1.
    arscy Posted messages 196 Status Member 8
     

    A possible solution is to implement the method in the Store.
    --> place a variable with a listener on it, which triggers the function.
    Component A updates the var1Store variable in the store,
    The listener placed on the var1Store variable calls the funcStore function.
    The funcStore function modifies a var2Store variable.
    Component B just needs to handle the display of var2Store.

    0