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

【问题标题】：Can't update data in Vue.js using event.target.href无法使用 event.target.href 更新 Vue.js 中的数据
【发布时间】：2020-05-07 13:38:50
【问题描述】：

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

我将 URL 作为 Laravel 的 props 传递到我的 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);
    }
  }
};

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

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

【问题讨论】：

为什么不直接在标签内设置呢？喜欢联系我们
我刚才试过这样做，但出现同样的问题（没有更新）
你确定你的 extcontacturl 有值吗？
是的，当我执行 console.log 或警报时它显示了正确的值，只是不会分配给数据。
您的代码似乎没有问题。你能把你的道具改成这个吗？ props: { extcontacturl: { type: String, default:'test' }, },

标签： javascript laravel vue.js vue-props

【解决方案1】：

模板中不需要this。

应该是这样的：

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

【讨论】：