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

Question

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

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

Спасибо

Answer 1

Вы можете сделать это с 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