[英]how do I pass url in vue js methods and trigger on @click
好的，所以我正在做 laravel vue js 項目，我想在方法中傳遞一個鏈接（下面的代碼）。 單擊 div 時，我希望被帶到該站點 ( www.google.com )，如下所示。 我在這里嘗試了類似帖子中給出的一些解決方案，但沒有運氣。
<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>
使用window的location對象。
goToMySite(){
window.location.href='http://www.google.com'
}
您的代碼中有幾個問題。
mouseenter / mouseleave而不是mouseover / mouseout這會觸發很多不必要的事件v-if / v-else而不是v-show 。goToMySite方法中不存在href這是一個工作示例：
<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>
還有一個片段（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>
順便提一些提示：
false 、 null和undefined之間的差異，否則您可以使用! value ! value （如果您想知道變量是否已定義，則只需value ）a標簽為您的鏈接（和風格，這樣它看起來像你的h6 ） 您還可以通過其他方式處理goToLink值更改（但這些都是主觀選擇）。 例如在模板中（因此您可以刪除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>
或者
<h6 v-if="! goTolink"
@mouseenter="goTolink = ! goTolink">Hover Me</h6>
<h6 v-else
@mouseleave="hideMe"
@click="goTolink = ! goTolink">Click to visit My Site</h6>
或僅保留一種切換方法：
<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 中將動態頁面 :id 傳遞給 $http.get url
[英]How do I pass a dynamic page :id to $http.get url in Vue.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.