让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我的Vue方法中的/blob/master/js/bootstrap-remote-tabs.js#L258 将应用该功能，但前提是我触发了两次更改。

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.

LE：

我为相关提到的问题准备了一支笔：
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选择器href =https://vuejs.org/v2/api/#Options-Lifecycle-Hooks =noreferrer>生命周期钩子是一个糟糕的代码味道。您的 validatePhoneNumber 使用选择器和DOM操作调用，但您使用Vue处理 keydown 事件。您需要使用jQuery处理此小部件上的所有内容。不要使用Vue设置其类或phone_number或处理其事件。这些都是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屋！