我如何通过`@ click`将hrefs传递给Vue js中的方法？

Question

我正在关注这个问题的公认答案：Hide links from Google via JavaScript

我想将href传递给方法linkAction()，如何使用@click实现此目的？

这是我到目前为止所拥有的

<template>
    <span
      href="https://www.w3schools.com/" <-- some url
      @click="linkAction(this)"
    >
      Link to W3 Schools 
    </span>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MainContent extends Vue {
  linkAction(e: any): any {
    console.log(e);
  }
}

</script>

我进入控制台：null。希望能有所帮助。谢谢！

Answer 1

替换您的链接至此（这不是打字稿）：

<span
      href="https://www.w3schools.com/" <-- some url
      @click="linkAction($event, 'https://www.w3schools.com/')"
    >

在您的方法内添加此：

methods: {
    linkAction(event, url){
        console.log(url);
    }

Answer 2

[this无法从模板访问

但是您可以简单地使用ref属性，然后使用this.$refs获取元素

<template>
    <span
      ref="link"
      href="https://www.w3schools.com/" <-- some url
      @click="linkAction"
    >
      Link to W3 Schools 
    </span>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MainContent extends Vue {
  linkAction(): any {
    console.log(this.$refs.link);
  }
}

</script>