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

Question

[cok23]

Почему загруженную страницу сайта, которая использует vue.js не могу изменить jquery или нативным js ?
Подключаю скрипт Jquery например
BX.ready(function (e) {
$('.kt-details__content').find('table.kt-contact-table tr').each(function() {

var $label = $(this).find('td.kt-contact-table__label');
console.log($label);
});

в консоль ничего

Comments

[VoidVolker]

cok23 https://qna.habr.com/help/rules#3.8
А так же будьте любезны рассказать на каком этапе отладки вашего кода у вас возникли сложности. Что именно не получается?

[alexalexes]

$('.kt-details__content').find('table.kt-contact-table tr').each(function() {

var $label = $(this).find('td.kt-contact-table__label');
console.log($label);

То, что вы вызываете в ready - в vue этот код нужно помещать в обработчик жизненного цикла mounted.
PS: Если вы еще не запихнули в vue элемент kt-details__content, то затаскивайте поскорей, нечего напрямую управлять DOM.
PSS: Если еще используете JQuery - хватит использовать, на нативе с головой хватает методов querySelector, querySelectorAll, Array.from для всяких each, без всяких костыльных библиотек.

[cok23]

alexalexes, понимаю конечно лучше в самом vue делать изменения
но не я vue делал и найти от куда ноги растут , кроме того vue.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.

[cok23]

Спасибо за ответ,
Описать компоненты, какие у вас есть, у Битрикса компоненты все раскиданы по папкам, покажите template.php, и соседнии

я бы с удовольствием,но я не изучал вью , а то что там очень много всего, и найти сложно, а мне надо всего поменять данные на этой странице
если б не vue.js
было бы без проблем
вот и хорош Vue.js , если не знаешь его, то швах

Answer 1

[Rsa97]

Оставляя в стороне вопрос "А на кой ляд вообще по vue.js-странице лазить через jquery?", а ваш скрипт вообще запускается? Функция вызывается? Тот же нативный скрипт из консоли на этой странице работает?

Answer 2

[Николай]

Vue - имеет свой виртуальный DOM, он завязан у вас на id,
Jquery - работает с реальным DOM, как и нативный JS, вы виртуальный никак не поменяете, так как его нет.
Для решения задачи нужно
1- Описать компоненты, какие у вас есть, у Битрикса компоненты все раскиданы по папкам, покажите template.php, и соседнии
2- В битрикс вью - обернут вообще еще в одну оболочку, это на мой взгляд бред, и я бы отказался в принципе от этого, и делал бы все нативно
3- Отказался бы от BX.ready и делал бы только на vue, опишите задачу и где у вас появилась проблема

Comments

[cok23]

Спасибо за ответ,

Описать компоненты, какие у вас есть, у Битрикса компоненты все раскиданы по папкам, покажите template.php, и соседнии

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

[Николай]

Я про компоненты битрикса, у вас же это вызывается в каком-то компоненте