CODEWITHSUNDEEP
javascriptjquerypluginsvue.js
Arel Lin
Arel Lin

Reputation: 928

Why JQuery plugin can't work in Vue zone?

I know If we direct using JQuery plugin in Vue instance, it won't work.
That's why we use wrapper component.
What I want to know is why it can't work?
Is it because of Vue cut off the binding between the element and the plugin or something?
If yes, is it happened in specific part of Vue life cycle?
Using JQuery date-picker as example, I try to see if something is changed during the life cycle, I thought maybe something will be overridden, but I end up finding nothing...
Can anyone explain the mechanism of the conflict between Vue and 3rd party library? Thanks...

console.log($('#date-picker'));
  console.log(document.getElementById('date-picker'))
new Vue({
  el: '#app',
 	beforeCreate: function() {
  	console.log($('#date-picker'));
    console.log(document.getElementById('date-picker'))
	},
  created: function() {
  	console.log($('#date-picker'));
    console.log(document.getElementById('date-picker'))
  },
  beforeMount: function() {
  	console.log($('#date-picker'));
    console.log(document.getElementById('date-picker'))
  },
  mounted: function() {
  	console.log($('#date-picker'));
    console.log(document.getElementById('date-picker'))
  },
});
<div id="app">
  <input id="date-picker">
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Upvotes: 0

Views: 1051

Answers (2)

Hardik Satasiya
Hardik Satasiya

Reputation: 9715

source : https://github.com/vuejs/vue/issues/3587

when vue initialize, for the inline template it will fetch current template markup then it will remove it from DOM and compile that markup to render function so in this process all events are destroyed so new markup which is generated by render function will not have that events.

Now, you wondering what ? if I am adding @click/v-on:click works fine why ? because during compilation this attribute are parsed and events are attached to the vue instance methods, then it will be added back to DOM. so they will work just fine.

so if you have attached events before initialization, then it will be removed in case of inline template.

So, next thing how to handle this things ?? yes we can handle this as once this process is done instance is mounted to DOM now it wont remove elements unless we need it, so after mounted , mounted life cycle event is fired so in this event you can attach your events now they will be persisted.

if anything else you need to know , please comment.

Upvotes: 1

B. Fleming
B. Fleming

Reputation: 7230

There are a couple of important points to consider:

1) When you're using jQuery, you typically set different event listeners on DOM elements that exist on the page. When you add new DOM elements, those event listeners aren't currently "attached" to those new elements, and when you delete existing elements, any event listeners are destroyed.

2) When you're rendering DOM elements in Vue, elements are frequently destroyed in the process, resulting in existing event listeners also being destroyed. New Vue elements will not have event listeners attached from earlier jQuery commands.

You absolutely can use jQuery with Vue, but in order to do so, you have to be very, very careful about understanding the DOM lifecycle in regards to both technologies. Utilizing Vue's lifecycle hooks and ensuring that you don't inadvertently attach more event listeners than you intend to is very important.

(Note: The above is incredibly simplified and using pure jQuery with Vue is highly discouraged, but it's still completely achievable if you know what you're doing.)

Upvotes: 0

Related Questions