[vue.js]アンカーをクリックしてもリンク先に飛ばないときの対処法

Index

問題

以下のコードでリンクをクリックしてもなぜか何も起こらない

<script setup lang="ts">
import {ref} from 'vue';
let link = ref('https://google.com/')

function onClick(){
  link.value = 'https://yahoo.co.jp/'
}
</script>

<template>
  <a :href= "link" target="_blank" > link </a>
  <button @click="onClick">change link</button>
</template>

import {ref} from 'vue';

let link = ref('https://google.com/')

function onClick(){

link.value = 'https://yahoo.co.jp/'

}

</script>

<button @click="onClick">change link</button>

</template>

対処法

以下のようにコードを変更すればOK

<script setup lang="ts">
import { ref } from 'vue';
let link = ref('https://google.com/');

function openLink() {
  window.open(link.value, '_blank');
}

function onClick() {
  link.value = 'https://yahoo.co.jp/';
}
</script>

<template>
  <a href="#" @click="openLink">link</a>
  <button @click="onClick">change link</button>
</template>

<style scoped>
</style>

import { ref } from 'vue';

let link = ref('https://google.com/');

function openLink() {

window.open(link.value, '_blank');

}

function onClick() {

link.value = 'https://yahoo.co.jp/';

}

</script>

<button @click="onClick">change link</button>

</template>

</style>

原因

Vue.jsのテンプレート内では、href属性に変数をバインドする場合、Vueのリアクティブシステムが変数の変更を監視し、変更があったときに自動的に要素の属性を更新します。しかし、target="_blank"を使用して新しいウィンドウまたはタブでリンクを開こうとすると、ブラウザがポップアップブロックをトリガーする可能性があるため、リンクが動作しないことがあります。

この問題を解決するためには、<a>要素のhref属性を動的に変更する際に、ブラウザのポップアップブロックを回避するための方法を追加する必要があります。具体的な方法は、次のようにwindow.open()メソッドを使用して新しいウィンドウまたはタブを開くことです。