Question
This question is related/similar to Using intl-tel-input and vuejs2 together , which is still unanswered.
And VueJS Use prop as data-attribute value which has a solution, but explains a bit the "environment".
So, long story short, I am dynamically setting up a new bootstrap tab (Title
and URL), and then trying to (re)bind some functionality using jQuery.
Adding the following line <https://github.com/thecodeassassin/bootstrap- remote-data/blob/master/js/bootstrap-remote-tabs.js#L258> in my Vue method will apply the functionality, but only if I trigger the change twice.
The same issue with the first (unanswered) question.
Could someone explain a bit how the things work between vueJS and jQuery ?
And how to solve things, hopefully without needing to rewrite jQuery packages.
If I console.log my variables just seem one step behind.
LE:
I have prepared a Pen for the related mentioned issue: https://codepen.io/AngelinCalu/pen/LWvwNq
Answer
The way to make Vue play nicely with other DOM-manipulating toolkits is to completely segregate them: if you are going to use jQuery to manipulate a DOM widget, you do not also use Vue on it (and vice-versa).
A wrapper component acts as a bridge, where Vue can interact with the component and the component can manipulate its internal DOM elements using jQuery (or whatever).
jQuery selectors outside of lifecycle
hooks are a bad code
smell. Your validatePhoneNumber uses a selector and a DOM-manipulating call,
but you are using Vue to handle keydown events. You need to handle
everything on this widget with jQuery. Don't use Vue to set its class or
phone_number or handle its events. Those are all DOM manipulations. As I
mentioned, if you wrap it in a component, you can pass props to the component
and from those props you can use jQuery to set class and phone_number.
