Accessing Vuejs Component Method From Jquery

29-10-2019

We can access Vue component from Jquery as follows:

 app.__vue__.$refs.summary.loadProjectSummary($('#code').val());

Vue Component is included as follows:

  <project-summary-component ref="summary"
                        project-summary-url="{{route('api.project.summary')}}">
                </project-summary-component>

As you notice, we have used ref attribute to access the component loadProjectSummary() method.

LoadProjectSummary method:

loadProjectSummary(code) {
    
    const data = {
        name: 'Client Token',
        scopes: []
    };
    axios.post('/oauth/personal-access-tokens', data).then(response => {
        let config = {
            headers: {'Authorization': "Bearer " + response.data.accessToken}
        };
        axios.get(this.projectSummaryUrl+"?code="+code, config).then(response => {
            this.project = response.data.data;
        }).catch(error => {
        });
    }).catch(error => {
    });
}

© 2019 All rights reserved. Codesenior.COM