Блог

Главная - Вопросы по программированию - Как изменить поведение привязки (href / onclick()) после отображения страницы, использующей Vue

Как изменить поведение привязки (href / onclick()) после отображения страницы, использующей Vue

#javascript #vue.js

#javascript #vue.js

Вопрос:

TL; DR

Мне нужно изменить URL привязки. Привязка имеет __vue__ свойство. Простое изменение href атрибута привязки не меняет поведение при нажатии на нее. Используя ванильный Javascript, как я могу изменить привязку в Vue, чтобы привязка указывала туда, куда мне нужно, чтобы она указывала? (У меня есть доступ только к DOM, поскольку это сторонняя CMS, которую я не могу контролировать).

Подробнее

Я использую службу CMS, которая позволяет загружать пользовательский Javascript в <head> раздел страницы.

Отображаемый веб-сайт имеет несколько привязок, указывающих на разные URL-адреса.

Я хочу изменить URL-адрес для одного из элементов.

Я пытался делать:

 els = document.querySelectorAll('a[href*="/here"]');
els.forEach((el) => {
  el.href="/elsewhere"; 
  el.onClick = (e) => {e.preventDefault()}
})

Проблема в том, что при нажатии на элемент привязки он все равно переходит /here вместо /elsewhere ожидаемого.

При дальнейшем рассмотрении элементы привязки имеют __vue__ свойство, предполагающее, что они были созданы и управляются Vue.js .

Как я могу использовать ванильный Javascript для изменения href этих привязок и обновления Vue.js о том , на что указывает ссылка ?

Как бы то ни было, вот скриншот <a/> тега, который я вижу в браузере, который href я хочу изменить:

введите описание изображения здесь

Комментарии:

1. Является ли этот элемент частью шаблона Vue? Было бы лучше показать html / script

2. да, у него есть element.__vue__ свойство, если вы об этом спрашиваете… обновил вопрос изображением.

3. У меня нет доступа к шаблону, только к DOM. Я хотел бы использовать Javascript, чтобы изменить ссылку на элемент и указать его в другом месте.

4. @tao это похоже на то, что я хочу сделать. Как я могу заставить экземпляр Vue изменять свои данные? Спасибо

5. Это внешняя ссылка или <router-link> ?

Метки: