VueJS и JQuery меняют классы

У меня есть некоторый пользовательский код JQuery, который прослушивает события и добавляет некоторые классы для элементов формы (фокус, размытие, нечетные/четные и т.д.). Ничего особенного, но я бы не хотел переписывать всю эту логику на VueJS, так как весь сайт использует только JQuery, а 1 страница использует VueJS для сложной формы.

Я написал директиву для запуска кода JQuery для новых элементов VueJS, и она работает. Но некоторый код VueJS (плагин директивы vee-validate в моем случае, но это может быть любой код VueJS) изменяет классы, используя v-bind:class. Таким образом, он стирает наборы классов JQuery, он не добавляет свои классы, а заменяет их... Есть ли способ хорошо поиграть с классами из VueJS и JQuery/Javascript? Сделайте JQuery осведомленным о существующих классах или что-то в этом роде.

Спасибо


vue.js jquery vee-validate
person Mushr00m    schedule 10.12.2017    source источник
comment
Похоже, вам придется назначать классы JQuery позже в жизненном цикле (возможно, в mounted) для компонента, а не в директиве.   -  person webnoob    schedule 11.12.2017
comment
В дополнение к тому, что было сказано выше, вам следует обратить внимание на крючки жизненного цикла в целом. Хуки mounted и updated, скорее всего, вас больше всего заинтересуют.   -  person B. Fleming    schedule 11.12.2017
comment
Это не то, что вам нужно, а то, как заставить jQuery и Vue работать хорошо. stackoverflow.com/a/43255516/392102   -  person Roy J    schedule 11.12.2017
comment
Спасибо за ваши ответы, но я использую Directive, а не Component. Потому что мне нужно прикрепить несколько директив к элементу, а с компонентом — только одну. Ваш пример о mounted и updated предназначен для components.   -  person Mushr00m    schedule 11.12.2017

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете сделать это с помощью MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

В следующем примере будет настроено приложение vuejs, которое при нажатии меняет класс с on на off и обратно, изменяя список классов через vue. Затем он настроит наблюдатель мутаций для поиска изменений в атрибуте класса и запустит еще несколько jquery, чтобы проверить, есть ли класс makeBold в списке классов, и если нет, добавить его.

это демонстрирует, что vue контролирует список классов элементов, а наблюдатель реагирует на изменения, выполняя некоторый jquery

кроме того, я добавил флажок, чтобы отключить реакцию oberserver, чтобы показать, что vue удаляет класс makeBold

const app = new Vue({
  el: '#app',
  data() {
    return {
      on: true
    }
  }
})
const node = document.getElementById('app')
// add bold class with jQuery
$('#app').addClass('makeBold')

const observer = new MutationObserver(mutations => {
  if ($('#cbx').prop('checked')) return
  const changes = mutations
    .filter(({ attributeName }) => attributeName === 'class');
  if (changes.length && !$('#app').hasClass('makeBold')) {
    $('#app').addClass('makeBold')
  }
})

observer.observe(node, { attributes: true })
.on {
  background-color: orange;
}

.off {
  background-color: white;
}
.makeBold {
  font-weight: 600;
}
.appBody {
  height: 100px;
  border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="appBody" :class="{ 'on': on, 'off': !on }" @click="on=!on">
  Click Me
</div>
<input type="checkbox" id="cbx"> Disable Observer reaction

person vbranden    schedule 15.12.2017