Skip to main content
Hashnode
Working Unit TestsWorking Unit Tests

Vue.js <button> opening a new tab

Updated 1 min readMarkdown
M
Matt Dean
Part of seriesDaily Coding
Vue.js <button> opening a new tab

One thing I found difficult in remembering how to do was making a button in VueJS act as an <a> tag and open a link via a new tab. Fortunately, this was way easier than I thought! 

<​button @​click​=​"​gotoLink()​">
  Click me! 
</button>

methods: {
​  gotoLink​() {
​    window​.​open​(​'https://workingunittests.com'​, ​'​_blank​'​);
  }
}

3.9K views

Comments(1)

Join the discussion
SSweta2y ago

Kindly upload the code for opening button in same tab with proper navigation of respective page of button selected

1
MMatt Dean2y ago

Thank you for your comment! It is possible to use JavaScript to open a link in the same tab by following the instructions mentioned in the blog post, excluding the '_blank' portion. For example, it would be window.open('https://workingunittests.com');

1
SSweta2y ago

Yes Matt Dean I have tried this but due to window.open it's opening in new tab not in the same tab. Kindly provide some other solution to open link in same tab.

MMatt Dean2y ago

Sweta Hey there! After a little research, this is actually solvable by instead of using '_blank', use '_self' and you should be good to go!

1
MMatt Dean2y ago

Sweta Something that I find useful for these sorts of things is to search in your search engine the language you are working with (in this case, JavaScript) followed by your intended action. It takes a little tinkering to learn what keywords to use all the time, so expect a little practice. I ended up searching for "js open link in same tab" which helped me solve the issue

SSweta2y ago

Matt Dean I have tried using '_self', window.location.replace, window.location.href, window.location.assign all did not work for opening the link in the same tab. '_self' is opening current page what is opened in website but not the respective page of the link after clicking on the link. Kindly provide some other solution.

MMatt Dean2y ago

Sweta I believe this topic may not currently align with the focus of this blog (I suggest conducting research to determine if others have attempted this with the same JS framework you are using). Additionally, there are multiple factors that could impact the desired functionality you are seeking. It would be advisable to incorporate console logs and debugger statements in order to gain a thorough understanding of any deficiencies, whether they may involve errors or incorrect logic.

1
SSweta2y ago

Matt Dean thanks a lot for your immediate response. will check the errors in console since it's showing Typeerror: cannot read properties of null for navigation.

Daily Coding

Part 7 of 7

In this series, expect some detailed blogs on useful snippets or coding procedures that I find useful for my day-to-day life as a web developer!

Start from the beginningResponse.Redirect is Dumb. Here's a Smarter Approach.In the world of web development using C#, the Response.Redirect method is a common way to guide users to different pages within a web application. However, there's a glaring issue that we need to address: the second parameter, which introduces unnece...

More from this blog