[Vuejs]-How do I pass url in vue js methods and trigger on @click

by

0👍

✅

There are several issues in your code.

  • Listeners are not at the good place. By setting it on the parent container the link will never appear because its parent is not displayed anymore.
  • You should use mouseenter / mouseleave instead of mouseover / mouseout which trigger a lot of unnecessary events
  • You have to use v-if / v-else instead of v-show in this kind of use case.
  • href doesn’t exists in your goToMySite method

Here’s a working example :

<template>
    <div style="cursor:pointer;">
        <h6 v-if="! goTolink"
            @mouseenter="showMe">Hover Me</h6>
        <h6 v-else
            @mouseleave="hideMe"
            @click="goToMySite">Click to visit My Site</h6>
    </div>
</template>

<script>
export default {
    props: [],
    data() {
        return {
            goTolink: false,
            href: 'https://www.google.com'
        }
    },
    methods: {
        showMe() {
            this.goTolink = true
        },
        hideMe() {
            this.goTolink = false
        },
        goToMySite() {
            // Do what you want here, for example
            window.open(this.href, '_blank');
        }
    }
}
</script>

And a snippet (window.open doesn’t works here but it’s ok in a regular file) :

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
<div id="app">
  <div style="cursor:pointer;">
    <h6 v-if="! goTolink"
        @mouseenter="showMe">Hover Me</h6>
    <h6 v-else
        @mouseleave="hideMe"
        @click="goToMySite">Click to visit My Site</h6>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      goTolink: false,
      href: 'https://www.google.com'
    },
    methods: {
      showMe() {
        this.goTolink = true
      },
      hideMe() {
        this.goTolink = false
      },
      goToMySite() {
        // Do what you want here, for example
        console.log(`Let's visit ${this.href}`);
        window.open(this.href, '_blank');
      }
    }
  })
</script>
</body>

</html>

Some tips by the way :

  • Don’t use inline styling
  • Unless you want to handle the differences between false, null and undefined, you can test if a value doesn’t exists using ! value (and just value if you want to know if the variable is defined)
  • It would maybe more relevant here to use a a tag for your link (and style it so it looks like your h6)

You could also handle the goToLink value change in some other ways (but these are subjective choices). For example in the template (so you can remove the methods showMe and hideMe) :

<h6 v-if="! goTolink"
    @mouseenter="goTolink = true">Hover Me</h6>
<h6 v-else
    @mouseleave="hideMe"
    @click="goTolink = false">Click to visit My Site</h6>

or

<h6 v-if="! goTolink"
    @mouseenter="goTolink = ! goTolink">Hover Me</h6>
<h6 v-else
    @mouseleave="hideMe"
    @click="goTolink = ! goTolink">Click to visit My Site</h6>

or keep only one method for toggling :

<h6 v-if="! goTolink"
    @mouseenter="toggleLink">Hover Me</h6>
<h6 v-else
    @mouseleave="toggleLink"
    @click="toggleLink">Click to visit My Site</h6>

methods: {
    toggleLink() {
        this.goTolink = ! this.goTolink;
    }
}

0👍

Use the location object of window.

goToMySite(){
    window.location.href='http://www.google.com'
}

Leave a comment