Блог

У меня есть событие щелчка в vue по ссылке, которая содержит модальную, модальная имеет ссылку, которая направляет пользователя на другой сайт. Все работало так, как ожидалось, пока я просто не добавил событие щелчка Google Analytics. Теперь открывается модальный, но ссылка на другой сайт просто возвращается на домашнюю страницу / root. есть ли способ вызвать оба события щелчка по ссылке без разрыва?

Ссылка, которая запускает модальную и выводит ссылку:

              <a
              href="https://www.linkout.com"
              rel="noopener"
              @click.prevent="
                openInterstitial;
                $ga.event('link', 'click', 'ISI_link');
              "
              target="_blank"
              >www.linkout.com</a
            >
 

метод смешивания:

 Vue.mixin({
  methods: {
      openInterstitial(event) {
        if (event) {
          event.preventDefault();
          this.$store.commit('modals/setInterstitialHref', event.target.href);
        }

        this.$store.commit('modals/setShowInterstitial', true);
      }
    }
  });
 

Магазин

 export const state = () => ({
  interstitial: {
    show: false,
    href: ''
  }
});

export const mutations = {
  setShowInterstitial(state, boolean) {
    state.interstitial.show = boolean;
  },
  setInterstitialHref(state, string) {
    state.interstitial.href = string;
  }
};
 

Я воспроизвел вашу проблему, и кажется, что ваш openInterstitial метод вообще не вызывается. Проблема в том, что вы используете этот метод для доступа к данным события (использование без круглых скобок). Из-за этого вы не можете связать их, как вы это делали, оно просто не будет выполнено. Вы можете не использовать круглые скобки, только если используете один обработчик.

Вместо этого вы можете использовать свой метод с круглыми скобками и передавать данные события с $event помощью (Docs).

 @click.prevent="
  openInterstitial($event);
  $ga.event('link', 'click', 'ISI_link');
"
 

Таким образом, вы можете получить доступ к данным о событии и связать несколько методов.
Надеюсь, это устранило вашу проблему!