How to Access a vue data from jquery on click event handler

Question

I have a vue component as

var app_3 = new Vue({
    el:'#app-3',
    data() {
        return {
            step:1,
            models:''
        }
    }
});

And I am handling a click event using jquery like

$('body').on('click', '.models', function() {
});

I would like to access the vue data models from the jquery event handler. How can I access it?

Can you please add more script and explain why do you want to access vue stuff in jquery? — Ayaz Ali Shah
– Ayaz Ali Shah, Commented Nov 12, 2018 at 5:44
You're almost 100% doing it wrong. Let Vue handle the click, not jQuery. — connexo
– connexo, Commented Nov 12, 2018 at 5:56
Agreed it's probably not the best way to do things. But you could save your root instance to a global window variable, like this person has: rent-a-hero.de/wp/2017/08/25/… — James Wesc
– James Wesc, Commented Nov 12, 2018 at 5:58
It better would be to add the handler from within vue, probably from within the mounted lifecycle hook — James Wesc
– James Wesc, Commented Nov 12, 2018 at 6:00
@JamesWesc Why would he not simply add a v-on:click directive to his .models element? — connexo
– connexo, Commented Nov 12, 2018 at 6:05

Niklesh Raut · Accepted Answer · 2018-11-12 06:02:12Z

4

I dont know your purpose but you can use app_3.step to get and set vue data.

var app_3 = new Vue({
    el:'#app-3',
    data() {
        return {
            step:1,
            models:''
        }
    }
});

$('body').on('click', '.models', function() {
app_3.step +=1;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
<div id="app-3">
  Step : {{step}}
</div>
<button class="models">Models</button>
</body>

answered Nov 12, 2018 at 6:02

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

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

1 Comment

jarrodwhitley Over a year ago

This works, but it is not the best way. See connexo's answer for the correct way to handle events in Vue.

connexo · Accepted Answer · 2018-11-12 06:13:53Z

Don't mangle jQuery and Vue together. For event handling Vue has all the tools necessary.

var app_3 = new Vue({
    el:'#app-3',
    data() {
        return {
            step: 1,
            models:''
        }
    },
    methods: {
      decreaseStep() {
        this.step -= 1
      }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app-3">
  Step : {{step}}
  <button @click="step+=1">+</button>
  <button @click="decreaseStep">-</button>
</div>

These are just two simple examples. You'd go with the +-button code if the task is so trivial, otherwise you'd create a function inside the methods object on your viewmodel.

Marcelo Dias Schneider · Accepted Answer · 2021-04-14 14:05:26Z

On Vue Js i create a method and called it in before Mount:

 var app_3 = new Vue({
        el:'#app-3',
        data() {
            return {
                step:1,
                models:''
            }
        },
        methods: {
            // called by beforeMount()
            foo() {
                let proxy = this
                $('body').on('click', '.models', function() {
                    // call a method
                    proxy.bar()
                    // set a variable data
                    proxy.step = 2
                });
            },
            // called each .model click
            bar(){
                console.log('it id working');
            }
        },
        beforeMount() {
            this.foo()
        }
    })

Collectives™ on Stack Overflow

How to Access a vue data from jquery on click event handler

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related