Задать вопрос
  • Почему загруженную страницу сайта, которая использует vue.js не могу изменить jquery или нативным js?

    @PaimonPai
    Вы не можете так править потому что куском DOM владеет Vue и он его постоянно перерисовывает. Смотрите что происходит. Vue хранит виртуальный DOM и реактивные данные. Когда данные меняются, он собирает новый кусок реального DOM и заменяет старый. Любые правки которые вы сделали снаружи через jQuery или через querySelector, просто затираются при следующей перерисовке. Поэтому в консоли пусто, селектор в момент BX.ready еще ничего не находит. Проверить просто. Откройте Vue devtools, найдите этот блок kt-details__content. Если он внутри Vue компонента, значит он рендерится Vue. Откройте консоль и выполните ваш селектор вручную через пару секунд после загрузки страницы. Скорее всего он уже найдет элементы, а ваш код в BX.ready сработал раньше маунта. Самый правильный способ это менять не DOM, а данные Vue. Найдите компонент который рендерит таблицу и поменяйте его data или props. Тогда Vue сам перерисует как надо. Если надо именно снаружи и быстро починить, дождитесь когда Vue смонтировался и отрисовал. Внутри компонента это делается так

    this.$nextTick(function() {
    // тут DOM уже есть
    })

    Снаружи без доступа к компоненту используйте MutationObserver. Он сработает когда Vue вставит таблицу

    const target = document.querySelector('.kt-details__content')
    const obs = new MutationObserver(() => {
    const rows = target.querySelectorAll('table.kt-contact-table tr')
    if(rows.length){
    obs.disconnect()
    // ваша логика тут
    }
    })
    obs.observe(target, {childList: true, subtree: true})

    Подводный камень. Даже если вы сейчас что то поменяете через jQuery, при любом обновлении данных Vue вернет все обратно. Поэтому смешивать jQuery и Vue на одном куске DOM это антипаттерн. Либо полностью перенесите логику в Vue, либо вынесите ваш блок за пределы Vue root.
    Написано