How to call a vuejs function in jquery if your using vue with export default

Question

On the vuejs.org website there is this function. I want to replicate this to test some code i am writing in an on click function on a table row using jquery.

   $("#table1 tr").click(function () {
            // alert($(this).text());
            //  alert($(this).children("td").html());
            // app.greet();
        });

I want to call the vue function there but my vue code is written in the script and i am using export default like so.

export default {
    data() {
        return {

        }
etc.
}

If i want to use this vue function in jquery how do i call it.

Daniel Diekmeier · Accepted Answer · 2017-06-27 15:11:48Z

8

You have to instantiate the App, then you can call the method on it:

import Vue from 'vue'
import App from './app.vue'

const app = new Vue(App)

$("#table1 tr").click(function () {
  app.greet()
})

edited Jun 27, 2017 at 15:11

answered Jun 27, 2017 at 15:04

Daniel Diekmeier

3,46420 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DanielM96 Over a year ago

can i do this in separate components

DanielM96 Over a year ago

also when you say import app from app.js do i import my app.vue file there or my main.js file.

Daniel Diekmeier Over a year ago

@DanielM96 The .vue file. I edited my answer accordingly.

amirreza sharifi · Accepted Answer · 2023-05-23 15:37:23Z

0

export default {
  mounted(){
     $("#table1 tr").on('click',()=> {
        this.greet()
     });
  },

  methods:{
    greet(){
      console.log('greet method')
    }
  }
}

answered May 23, 2023 at 15:37

amirreza sharifi

412 bronze badges

1 Comment

Tyler2P Over a year ago

Your answer could be improved by adding more information on what the code does and how it helps the OP.

Collectives™ on Stack Overflow

How to call a vuejs function in jquery if your using vue with export default

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related