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

Question

我正在尝试更新我的 Vue.js 数据(链接点击(。

我有 URL 作为来自 Laravel 的道具传递到我的 Vue 组件中。这些道具附加到页面上的多个锚标签上，其中包含道具中的各种 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);
}
}
};

但是，链接单击了我的数据根本没有更新，我不确定我哪里出错了。

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

Answer 1

模板中不需要this。

应该是这样的：

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