I want to open the page link in a new tab after Axios response success, I have googled the solution about it but the browser keeps blocking popup. I have tried the below one but not getting work and not supported in all browsers
let newTab = window.open(); newTab.location.href = url;
_blank can help you opening new window.
check out the documentation of window.open function on w3school.
https://www.w3schools.com/jsref/met_win_open.asp
But for security reasons, browsers block such pop-ups. This is a default and desired behaviour from user security point of view. You can override this setting using below solution. https://blog.getadblock.com/how-to-disable-pop-up-blockers-in-every-browser-a1cccbae53e7
You could specify it as the second parameter with _blank value:
let newTab = window.open(url,'_blank');
@Dhruti if all else fails you can still have a button click trigger the new tab, just make th button hidden and trigger a click action with JavaScript. Give the button an id or ref="somename" in Vue, and a class. Set it's opacity: 0; and position it somewhere on the page where it's unnoticed. You could even set position: relative; (or absolute/fixed) and give it a z-index: 0; or -1, and then after your axios response, call
this.$refs.hiddenButton.click() making sure that you've set target="_blank" on the button.
*tip,
target="_blank" will open a new tab each time that element is clicked.
target="blank" (with no underscore) will open a new tab the first time, and then reuse that tab on each subsequent click.
In Composition API, it is necessary to create a handler function to get window browser object.
<script>
const handleOpenLinkInNewTab = () => {
// window object is visible here
window.open('http://google.com', '_blank')
}
</script>
<template>
<div @click="handleOpenLinkInNewTab">
<ArrowTopRightOnSquareIcon class="h-4" />
</div>
</template>
Note: In this next example window is undefined
<template>
<div @click="() => window.open('http://google.com', '_blank')">
<ArrowTopRightOnSquareIcon class="h-4" />
</div>
</template>
