让 VueJS 和 jQuery 玩得更好 [英] Make VueJS and jQuery play nice

问题描述

此问题与同时使用 intl-tel-input 和 vuejs2 相关/相似，但仍未得到解答.

This question is related/similar to Using intl-tel-input and vuejs2 together , which is still unanswered.

和 VueJS 使用 prop 作为数据属性值 有一个解决方案，但解释了一点环境".

And VueJS Use prop as data-attribute value which has a solution, but explains a bit the "environment".

所以，长话短说，我正在动态设置一个新的引导程序选项卡(标题和 URL)，然后尝试使用 jQuery(重新)绑定一些功能.

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.

添加以下行 https://github.com/thecodeassassin/bootstrap-remote-data/blob/master/js/bootstrap-remote-tabs.js#L258 在我的 Vue 方法中将应用该功能，但前提是我触发改变两次.

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.

有人可以解释一下 vueJS 和 jQuery 之间的工作原理吗?以及如何解决问题，希望不需要重写 jQuery 包.

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.

如果我 console.log 我的变量就好像落后了一步.

If I console.log my variables just seem one step behind.

乐:

我已经为相关提到的问题准备了一支笔:https://codepen.io/AngelinCalu/pen/LWvwNq

I have prepared a Pen for the related mentioned issue: https://codepen.io/AngelinCalu/pen/LWvwNq

推荐答案

让 Vue 与其他 DOM 操作工具包很好地协同工作的方法是将它们完全隔离:如果您打算使用 jQuery 来操作 DOM 小部件，您不要同时在其上使用 Vue(反之亦然).

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).

包装组件充当桥梁，Vue 可以在其中与组件进行交互并组件可以使用 jQuery(或其他)操作其内部 DOM 元素.

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 选择器是一种糟糕的代码味道.您的 validatePhoneNumber 使用选择器和 DOM 操作调用，但您使用 Vue 来处理 keydown 事件.您需要使用 jQuery 处理此小部件上的所有内容.不要使用 Vue 设置它的类或电话号码或处理它的事件.这些都是 DOM 操作.正如我提到的，如果你将它包装在一个组件中，你可以将 props 传递给组件，然后你可以使用 jQuery 来设置 class 和 phone_number.

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.

这篇关于让 VueJS 和 jQuery 玩得更好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！