javascript - 无法使用 event.target.href 更新 Vue.js 中的数据

Question

我正在尝试更新我的 Vue.js 数据 (linkClicked)。

我有 URL 作为 Laravel 的 props 传递到我的 Vue 组件中。这些 props 附加到页面上的多个 anchor 标记，其中包含来自 props 的各种 URL。只要有外部链接，我就会附加一个调用方法(showModal)的点击事件。例如我的 anchor 标记如下所示:

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

在此方法中，我在控制台中记录 $event.target.href，并且可以确认单击时我在控制台中看到了正确的链接。所以 Prop 运转良好。我的脚本代码如下所示:

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

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

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

但是，我的数据中的 linkClicked 根本没有更新，我不确定哪里出了问题。

我期望 linkClicked 更新为 props 表示的 URL 字符串。例如，如果 extcontacturl 设置为“https://www.google.com/contact ”，那么我希望在单击联系人链接时 linkClicked 更新为此 URL。

Answer 1

模板中不需要 this。

应该是这样的:

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