Как я могу передать hrefs моему методу в Vue js с помощью `@ click`? - PullRequest
Новая
       18

Как я могу передать hrefs моему методу в Vue js с помощью `@ click`?

0 голосов
/ 22 января 2020

Я следую принятому ответу на этот вопрос: Скрыть ссылки от Google через 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. Был бы признателен за помощь. Спасибо!

Ответы [ 3 ]

2 голосов
/ 22 января 2020

В шаблоне необходимо изменить @click="linkAction(this)" на @click="linkAction($event)".

И в методе linkAction вы делаете что-то вроде этого: 

linkAction(e) {
  console.log(e.target.getAttribute('href'));
}
1 голос
/ 22 января 2020

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>
0 голосов
/ 22 января 2020

Один из вариантов - сделать link частью data вашего компонента, а затем использовать его в методе linkAction. 

<template>
    <span
      :href="link" 
      @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 {
  data(): any {
     return {
        link: 'https://www.w3schools.com/'
     }
  },

  linkAction(): any {
    console.log(this.link);
  }
}

</script>
...