New url is not opened in a new tab

Question

I have this code :

<b-btn
   variant="primary"
   class="btn-sm"
   :disabled="updatePending || !row.enabled"
   @click="changeState(row, row.dt ? 'activate' : 'start')">
   Activate
 </b-btn>

 ...........
 methods: {
    async changeState(channel, newMode) {
      const { id, type } = channel;
      const data = await this.getToken();
      window.open("https://en.wikipedia.org/", "_blank");
      return;
 }

When click on button, a new tab is not opened.

Problem is linked to await this.getToken(). If I remove the code all is working fine.

Answer 1

Chances are if it works without const data = await this.getToken(); then the issue is that the browser is blocking it, because it isn't clearly the result of a click (and browser's tend to not like unexpected popups).

What might work (at least it works on firefox) is to do something like:

async changeState(channel, newMode) {
  let w = window.open("", "_blank");
  const { id, type } = channel;
  const data = await this.getToken();
  w.location.href = "https://en.wikipedia.org/"
  return;
}

where you first open the new window, then change the URL of the newly opened window.

E.g. https://jsfiddle.net/xgoavep2/