Не удается обновить данные в Vue.js с помощью event.target.href

Я пытаюсь обновить свои данные Vue.js (linkClicked).

У меня есть URL-адреса, которые передаются в мой компонент Vue в качестве реквизита от Laravel. Эти реквизиты прикреплены к нескольким тегам привязки на странице с различными URL-адресами из реквизита. Везде, где есть внешняя ссылка, я прикрепил событие клика, которое вызывает метод (showModal). Например, мои теги привязки выглядят так:

<a @click.prevent="showModal($event)" :href="extcontacturl">Contact Us</a>

В этом методе я регистрирую $event.target.href в консоли и могу подтвердить, что при нажатии я вижу правильные ссылки в консоли. Так что реквизит работает нормально. Код моего скрипта выглядит так:

export default {
  props: [
    "extcontacturl",
  ],

  data() {
    return {
      linkClicked: undefined
    };
  },

  methods: {
    showModal($event) {
      this.linkClicked = $event.target.href;
      console.log($event.target.href);
    }
  }
};

Однако linkClicked в моих данных вообще не обновляется, и я не уверен, что ошибаюсь.

Я ожидаю, что linkClicked обновится до строки URL, представленной реквизитами. Например, если extcontacturl задан как "https://www.google.com/contact", то я ожидаю, что linkClicked обновится до этого URL-адреса при нажатии на контактную ссылку.


javascript vue.js laravel vue-props
person ImranR    schedule 21.01.2020    source источник
comment
почему бы не установить его прямо внутри тега? как ‹a @click.prevent=linkClicked = extcontacturl :href=extcontacturl›Свяжитесь с нами‹/a›   -  person Qonvex620    schedule 21.01.2020
comment
Я пытался сделать это только сейчас, но возникает та же проблема (ничего не обновляется)   -  person ImranR    schedule 21.01.2020
comment
Вы уверены, что ваш extcontacturl имеет значение?   -  person Qonvex620    schedule 21.01.2020
comment
Да, он показывал правильные значения, когда я выполнял console.log или предупреждение, просто не назначал данные.   -  person ImranR    schedule 21.01.2020
comment
Кажется, что ничего плохого в вашем коде. Можете ли вы просто изменить свой реквизит на это? реквизит: {extcontacturl: {тип: строка, по умолчанию: 'тест'},},   -  person Qonvex620    schedule 21.01.2020
comment
Как ни странно, теперь он работает нормально, хотя я никогда не менял код. Я перекомпилировал app.js несколько раз, и через несколько часов он никогда не работал должным образом. Может что-то кешировал?   -  person ImranR    schedule 22.01.2020

Ответы (1)


arrow_upward
1
arrow_downward

В шаблоне нет необходимости в this.

Должно быть так:

<a @click.prevent="showModal($event)" :href="extcontacturl">Contact Us</a>
person Pierre Said    schedule 21.01.2020