如何在 vue js 方法中传递 url 并在 @click 上触发

Question

Okay so I am doing laravel vue js project and I want to pass a link in a method (code below).好的，所以我正在做 laravel vue js 项目，我想在方法中传递一个链接（下面的代码）。 on click of the div, I want to be taken to the site ( www.google.com ) as seen below.单击 div 时，我希望被带到该站点 ( www.google.com )，如下所示。 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>

Answer 1

Use the location object of window .使用window的location对象。

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

Answer 2

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您应该使用mouseenter / mouseleave而不是mouseover / mouseout这会触发很多不必要的事件
You have to use v-if / v-else instead of v-show in this kind of use case.在这种用例中，您必须使用v-if / v-else而不是v-show 。
href doesn't exists in your goToMySite method您的goToMySite方法中不存在href

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) :还有一个片段（window.open 在这里不起作用，但在常规文件中没问题）：

 <!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除非您想处理false 、 null和undefined之间的差异，否则您可以使用! value ! value (and just value if you want to know if the variable is defined) ! value （如果您想知道变量是否已定义，则只需value ）
It would maybe more relevant here to use a a tag for your link (and style it so it looks like your h6 )这将可能在这里查看更多有关使用a标签为您的链接（和风格，这样它看起来像你的h6 ）

You could also handle the goToLink value change in some other ways (but these are subjective choices).您还可以通过其他方式处理goToLink值更改（但这些都是主观选择）。 For example in the template (so you can remove the methods showMe and hideMe ) :例如在模板中（因此您可以删除showMe和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;
    }
}

如何在 vue js 方法中传递 url 并在 @click 上触发

问题描述

2 个解决方案

解决方案1
0 2021-10-29 23:58:21

解决方案2
0 2021-10-30 09:17:03

如何在 vue js 方法中传递 url 并在 @click 上触发

问题描述

2 个解决方案

解决方案1 0 2021-10-29 23:58:21

解决方案2 0 2021-10-30 09:17:03

解决方案1
0 2021-10-29 23:58:21

解决方案2
0 2021-10-30 09:17:03