Jump to content
RAGE Multiplayer Community

[C#] Call JS function in a Vue page ?


galzzy83
 Share

Recommended Posts

Hi all ! I know that you can call something like ExecuteJS to call a js function inside your CEF page, but if i'm using Vue JS in a single html file, how to I call one of my Vue methods or is there a way to call a Vue methods from my C# client script ?

 

Thank y'all ❤️

Link to comment
Share on other sites

On 7/2/2021 at 10:01 AM, Nutter said:

Bind your Vue app to the window. This will let you access your app using ExecuteJS.

So by doing this.myVue = new Vue... ? And then how would I call a Vue method from the executeJS method, just by doing ExecuteJS("this.myVue.myMethod()") ?

Thanks !

Link to comment
Share on other sites

Posted (edited)
17 minutes ago, galzzy83 said:

So by doing this.myVue = new Vue... ? And then how would I call a Vue method from the executeJS method, just by doing ExecuteJS("this.myVue.myMethod()") ?

Thanks !

Assign to window or make global variable.

window.myVue = new Vue

You can access methods by calling the method on the instance of a component. You can do this using the children property (forgot the actual name though) that is available on each parent component or use refs.

You should be able to find a few examples on GitHub.

Edited by Nutter
Link to comment
Share on other sites

12 hours ago, Nutter said:

Assign to window or make global variable.

window.myVue = new Vue

You can access methods by calling the method on the instance of a component. You can do this using the children property (forgot the actual name though) that is available on each parent component or use refs.

You should be able to find a few examples on GitHub.

I tried setting up my vue like so: window.characterSelect = new Vue... and then in C# client side ExecuteJS("window.characterSelect.setCharacters()"); and my console log didn't trigger... Am I doing something wrong ? Thanks

Link to comment
Share on other sites

Posted (edited)
22 hours ago, galzzy83 said:

I tried setting up my vue like so: window.characterSelect = new Vue... and then in C# client side ExecuteJS("window.characterSelect.setCharacters()"); and my console log didn't trigger... Am I doing something wrong ? Thanks

If you're using Vue3/Vue Next and the Router framework you could do something like

        public static void SetURL(this HtmlWindow window, string url)
        {
            if(url != null)
            {
                if (url == "/")
                {
                    RAGE.Ui.Cursor.Visible = false;
                } else
                {
                    RAGE.Ui.Cursor.Visible = true;
                }
                    
                string path = $"app.$router.push('{url}');";
                window.ExecuteJs(path);
            }
        }

And the same applies for using the Store with Vue Next as well; You can push it as an json string from the server.

app.store.state.(KEY).(ARRAY) = '{value}'

 

Edited by TheOnlyDroid
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...