How to Access a vue data from jquery on click event handler
0
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?
jquery vue.js
asked Nov 12 at 5:42
Abdunnasir K P
72
add a comment |
0
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?
jquery vue.js
asked Nov 12 at 5:42
Abdunnasir K P
72
Can you please add more script and explain why do you want to access vue stuff in jquery?
– Ayaz Shah
Nov 12 at 5:44
You're almost 100% doing it wrong. Let Vue handle the click, not jQuery.
– connexo
Nov 12 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
Nov 12 at 5:58
It better would be to add the handler from within vue, probably from within themountedlifecycle hook
– James Wesc
Nov 12 at 6:00
@JamesWesc Why would he not simply add av-on:clickdirective to his.modelselement?
– connexo
Nov 12 at 6:05
add a comment |
0
0
0
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?
jquery vue.js
asked Nov 12 at 5:42
Abdunnasir K P
72
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?
jquery vue.js
jquery vue.js
asked Nov 12 at 5:42
Abdunnasir K P
72
asked Nov 12 at 5:42
Abdunnasir K P
72
asked Nov 12 at 5:42
Abdunnasir K P
72
asked Nov 12 at 5:42
Abdunnasir K P
72
asked Nov 12 at 5:42
Abdunnasir K P
72
72
Can you please add more script and explain why do you want to access vue stuff in jquery?
– Ayaz Shah
Nov 12 at 5:44
You're almost 100% doing it wrong. Let Vue handle the click, not jQuery.
– connexo
Nov 12 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
Nov 12 at 5:58
It better would be to add the handler from within vue, probably from within themountedlifecycle hook
– James Wesc
Nov 12 at 6:00
@JamesWesc Why would he not simply add av-on:clickdirective to his.modelselement?
– connexo
Nov 12 at 6:05
add a comment |
Can you please add more script and explain why do you want to access vue stuff in jquery?
– Ayaz Shah
Nov 12 at 5:44
You're almost 100% doing it wrong. Let Vue handle the click, not jQuery.
– connexo
Nov 12 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
Nov 12 at 5:58
It better would be to add the handler from within vue, probably from within themountedlifecycle hook
– James Wesc
Nov 12 at 6:00
@JamesWesc Why would he not simply add av-on:clickdirective to his.modelselement?
– connexo
Nov 12 at 6:05
Can you please add more script and explain why do you want to access vue stuff in jquery?
– Ayaz Shah
Nov 12 at 5:44
Can you please add more script and explain why do you want to access vue stuff in jquery?
– Ayaz Shah
Nov 12 at 5:44
You're almost 100% doing it wrong. Let Vue handle the click, not jQuery.
– connexo
Nov 12 at 5:56
You're almost 100% doing it wrong. Let Vue handle the click, not jQuery.
– connexo
Nov 12 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
Nov 12 at 5:58
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
Nov 12 at 5:58
It better would be to add the handler from within vue, probably from within the
mounted lifecycle hook– James Wesc
Nov 12 at 6:00
It better would be to add the handler from within vue, probably from within the
mounted lifecycle hook– James Wesc
Nov 12 at 6:00
@JamesWesc Why would he not simply add a
v-on:click directive to his .models element?– connexo
Nov 12 at 6:05
@JamesWesc Why would he not simply add a
v-on:click directive to his .models element?– connexo
Nov 12 at 6:05
add a comment |
2 Answers
2
active
oldest
votes
0
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 at 6:02
C2486
18.8k32565
add a comment |
0
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.
answered Nov 12 at 6:13
connexo
20.3k73554
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256467%2fhow-to-access-a-vue-data-from-jquery-on-click-event-handler%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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 at 6:02
C2486
18.8k32565
add a comment |
0
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 at 6:02
C2486
18.8k32565
add a comment |
0
0
0
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 at 6:02
C2486
18.8k32565
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>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>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 at 6:02
C2486
18.8k32565
answered Nov 12 at 6:02
C2486
18.8k32565
answered Nov 12 at 6:02
C2486
18.8k32565
answered Nov 12 at 6:02
C2486
18.8k32565
18.8k32565
add a comment |
add a comment |
0
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.
answered Nov 12 at 6:13
connexo
20.3k73554
add a comment |
0
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.
answered Nov 12 at 6:13
connexo
20.3k73554
add a comment |
0
0
0
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.
answered Nov 12 at 6:13
connexo
20.3k73554
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.
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>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>answered Nov 12 at 6:13
connexo
20.3k73554
answered Nov 12 at 6:13
connexo
20.3k73554
answered Nov 12 at 6:13
connexo
20.3k73554
answered Nov 12 at 6:13
connexo
20.3k73554
20.3k73554
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256467%2fhow-to-access-a-vue-data-from-jquery-on-click-event-handler%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you please add more script and explain why do you want to access vue stuff in jquery?
– Ayaz Shah
Nov 12 at 5:44
You're almost 100% doing it wrong. Let Vue handle the click, not jQuery.
– connexo
Nov 12 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
Nov 12 at 5:58
It better would be to add the handler from within vue, probably from within the
mountedlifecycle hook– James Wesc
Nov 12 at 6:00
@JamesWesc Why would he not simply add a
v-on:clickdirective to his.modelselement?– connexo
Nov 12 at 6:05