Navigate to a different page in Vue3 after completing the file download process

After receiving a link from the server to download the file, the user initiates the function to begin downloading. Once the file has finished downloading, the user will be redirected to the main page.

<script setup lang="ts">

const goToMain = (time: number) => {
  setTimeout(() => {
    router.push({
      name: ERouteName.PAGE_HOME
    })
  }, time)
}

try {
  const { query } = router.currentRoute.value
  const { url } = await clientStore.uploadAppealFile(query.file_id as string)

  if (url) {
    const link = document.createElement('a')
    link.href = url
    link.click()
    goToMain(3000)
  }
} catch (error) {
  goToMain(0)
}
</script>

I am currently using a timer to switch to the main page, but I would prefer for the goToMain() function to execute after the file has finished loading.

Answer №1

If you're attempting to use await, it needs to be within an async function to work properly. Consider the following approach.

<script setup lang="ts">
import { onBeforeMount} from 'vue'

onBeforeMount( async() => {
try {
  const { query } = router.currentRoute.value
  const { url } = await clientStore.uploadAppealFile(query.file_id as string)

  if (url) {
    const link = document.createElement('a')
    link.href = url
    link.click()
    
  }
} catch (error) {
  .....
}
})
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS: Toggle footer visibility with custom message

My goal is to develop an Angular app using Intel XDK with 3 page scripts in index.html, each having a separate footer. The requirement is for the footer and its message to display and hide every 5 seconds when running each page. app.js app.controller(&ap ...

Issue encountered while attempting to send a direct message to a user that has been mentioned

Attempting to create a reminder command in discord.js with two arguments: the message and the mentioned user to remind but encountering an error. Code snippet: client.on('message', (message) => { const { content, guild, channel, author } = m ...

Tips on showcasing the elements within a div container using flexbox

Seeking advice on positioning items/cards using flexbox in my initial react app. The issue lies with the div within my card component where applying display: flex; turns every card into a block (column-like) structure, flexing only the content within each ...

Populate the content within a div element with specified height and width by utilizing JavaScript and jQuery

I need help with filling a fixed height div with long text retrieved via ajax in json format. For example, if I have a div with a height of 500px and width of 300px, with a font size of 16px. Is there a javascript recursive method that can fill the data ...

Can you tell if there are any distinctions between the two code snippets?

Initial Code console.log('Begin'); // output 1 await axios({ method: 'post', url: '<HTTP_URL>' data: <SOME_DATA>, }).then ((response) => { // Performing some action... This may take a few seconds. con ...

What is the most efficient way to move queried information from one table to another while maintaining all data entries?

Currently, I am working on a small POS project. In this project, I have two tables. The main purpose of the first table is to retrieve products from a search box with two column names retrieved from the database. If the products are found, I want to be abl ...

"Enhance your Vue 3 experience with a stylish Instagram Feed featuring

Struggling to retrieve the most recent Instagram posts from a feed using Vue 3 and Axios due to Instagram's strict-origin-when-cross-origin policy causing constant blocks. All access tokens are properly configured. The Instagram Basic Display API gui ...

Retrieve data from a different div, perform a subtraction operation, and dynamically update yet another div using jQuery

Looking to extract a specific div class value, subtract 500 from it, and display the result in another div. Unclear about the steps needed to show the subtraction outcome on the other div. Consider this scenario: <div class="main-value">6000</d ...

What is the best way to retrieve all collections and their respective documents in Firestore using cloud functions?

Seeking to retrieve an array structured as [1year, 1month, etc] with each containing arrays of documents. Currently encountering a challenge where the returned array is empty despite correct snapshot sizes. Unsure if issue lies with push() method implemen ...

Invoking a static method within a cshtml document

I am currently working on implementing a clickable DIV within a vertical tab panel. My goal is to have a specific static method called when the DIV is clicked. Here is what I have done: <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> ...

Improving efficiency by saving and loading the form value using best practices

One of the challenges I'm facing is how to populate dropdown selections on a webpage without resorting to hard-coded procedures. The code snippet below illustrates the current setup: <td> <ui-select ng-model="user_profile.gender" require ...

I am looking to modify the dimensions of the grouped GridHelper through the graphical user interface

I'm having trouble resizing the grid using the GUI interface. How can I adjust its size? Here are the steps I followed to create it. let scene = new THREE.Scene(); scene.background = new THREE.Color(0x222222); let group = new THREE.Group(); scene.add ...

Execute a simulated click function in JavaScript without causing the viewport to move

I have successfully implemented a sticky add to cart feature on my Shopify store. However, there seems to be an issue where clicking on the variations in the sticky area also triggers the same variations on the product page, making it difficult for users t ...

The visibility of buttons can be controlled based on the selected radio option

I have just completed setting up 4 buttons (add, edit, delete, cancel) and a table that displays data received via ajax. Each row in the table contains a radio button identified by the name "myRadio". When a radio button is clicked, I need the buttons to ...

Slider with a progress bar

Have you ever wondered if it's possible to create a progress bar using an input range? Imagine someone entering a number and the bar moves to the right, changing its background color on the left side of the thumb based on the size of the number. Check ...

Looping through the json resulted in receiving a null value

When working with typescript/javascript, I encountered an issue while trying to fetch the 'statute' from a data object: {_id: "31ad2", x: 21.29, y: -157.81, law: "290-11",....} I attempted to assign data.law to a variable, but received a typeer ...

What is the purpose of the execute_script() function in Selenium?

browser.execute_script("window.open('about:blank', 'tab2');") browser.switch_to.window("tab2") browser.get('http://bing.com') While exploring ways to open a new tab using Selenium in Python, I found the ab ...

Struggle with encoding dropdown menu options

I have multiple forms on my webpage and I want to be able to access them all at once and include them in a single large GET request. It's mostly working, but I'm encountering difficulties when dealing with drop down menus because their structure ...

Tips on modifying the message "Please fill out this field" in the JQuery validation plugin

Is there a way to customize the message "This field is required" in the Jquery form validation plugin to display as "このフィールドは必須です"? Changing the color of the message can be achieved using the code snippet below: <style type="tex ...

Different ways to tag users with the "@" symbol in Django

I've been diving into a project on django that has similarities to Instagram and Twitter. One crucial function it needs is the ability to mention users using "@" in text fields. After some research, I've come up empty-handed, except for libraries ...