how do I pass url in vue js methods and trigger on @click-CodePudding

Okay so I am doing laravel vue js project and I want to pass a link in a method (code below). on click of the div, I want to be taken to the site (www.google.com) as seen below. I have tried some solutions given on similar posts here but no luck.

<template>
    <div style="cursor:pointer;" @mouseover="showMe" @mouseout="hideMe" @click="goToMySite">
        <h6 v-show="goTolink === false">Hover Me</h6>
        <h6 v-show="goToLink === true"> Click to visit My Site </h6>
    </div>
</template>
    
<script>
export default {
    props: [],
    
    data() {
        return {
            goTolink: false,
        }
    },

    methods: {
        showMe(){
            this.goTolink = true
        },
    
        hideMe(){
            this.goTolink = false
        },
    
        goToMySite(){
            href='http://www.google.com'
        }
    }
}
</script>
    
<style>
    
</style>

CodePudding user response：

Use the location object of window.

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

CodePudding user response：

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/[email protected]/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>

<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;
    }
}