ListComponent.vue
<button class="add">Button</button>
home.html
$('.add').on('click',function() {
alert('Add');
});
Alert not show. How Can I get that class?
Add a comment
|
2 Answers
You can directly do it in Vue, but if you wanted to use jQuery then you can write the jQuery code in the mounted or created hook. Also you can use the jQuery code in the methods as well.
new Vue({
el: "#app",
mounted () {
$('.add').on('click',function() {
alert('Add');
});
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app">
<button class="add">Button</button>
</div>
Comments
Don't use jquery .. it's easy to solve in vuejs
<button @click="alert('Add')">Button</button>
7 Comments
Narxx
While I agree with you that Vue.js has its own event handlers, sometimes one has to use a 3rd party library based on jQuery, and thus needs proper solutions to his needs.
Estus Flask
@Narxx There are proper ways to do this with jQuery or vanilla JS but they should invlove Vue refs and cleanups on unmount where possible. Loosely coupling the code to an element with
.add selector anywhere on the page at arbitrary moment of time is the way to make the app buggy, leaky and hard to maintain, something that jQuery code is famous for.Estus Flask
@Hussam I'd upvote but this
alert=('Add') is a mistake.
Hussam
@Estu No matter if it shows an error or not but this is the correct way to add events to items using vuejs..
Hussam
What I want to say is that any method can be call by simply writing its name and writing it in the methods section
|