Challenges arise when trying to extract parameters in Nuxt 3

Hey everyone, I've been encountering some issues with extracting params from my route in Nuxt 3.

The format of my dynamic route is exam_[id]_[applicant_id].vue and once loaded, the URL appears like this: http://localhost:3000/e-recruitment/exam_cl96q0u040000v1ocg2ffryio_3. The two dynamic parameters are cl96q0u040000v1ocg2ffryio and 3. When I log the params object, I see this screenshot. What could possibly be causing this issue?

onMounted(async ()=>{
            console.log(route.params.applicant_id)
            console.log(route.params.id)
            })

javascriptvue.jsnuxt.js

Answer №1

There is no requirement for an onMounted hook or asynchronous function in this case. Simply utilize the useRoute composable.

<script setup>
const route = useRoute();
console.log(route.params.user_id);
console.log(route.params.post_id);
</script>

Answer №2

The issue stems from the underscores (_) that are being used in the route name of your pages.

If you decide to change your page name to exam-[id]-[applicant_id].vue, then when you access 

/exam-cl96q0u040000v1ocg2ffryio-3
, the parameters for the route will appear as follows:

{id: 'cl96q0u040000v1ocg2ffryio', applicant_id: '3'}

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

Leveraging the power of the map function to cycle through two arrays

Right now in React, I am utilizing array.map(function(text,index){}) to loop through an array. But, how can I iterate through two arrays simultaneously using map? UPDATE var sentenceList = sentences.map(function(text,index){ return <ListGr ...

javascriptreactjs

Trouble accessing Vue object properties

I'm encountering difficulties when trying to access object properties in Vue. Below is the structure of my component: <template> <div> <b> {{ posts }} <a :href="'https://steemit.com/&# ...

vue.js

A comprehensive guide on iterating through an array in JavaScript

Currently, I am facing an issue while trying to iterate over an array of Objects in React that have been fetched from Django. The object is stored as an array, but when attempting to map it, I encounter a typeerror stating "cannot read property map of unde ...

javascriptreactjs

Performing height calculations in JavaScript is necessary to recalculate them whenever there is a

A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the ...

javascriptjqueryhtmlcss

The issue persists with the MVC Controller parameter returning as null consistently, especially when the object field is

When using JavaScript to call a controller and process a function, I encountered an issue where the parameter value (name in summary) is null when the field is set to private. However, the function works correctly when the field is set to public. Is settin ...

javascriptasp.net-mvcparameterscontrollerprivate

Reconfigure the code to process object data instead of an array in JavaScript

Recently, I wrote a piece of code that is capable of exporting data into a CSV file. The data format it reads is structured as follows: var data = [ ['one', 'one is the first'], ['two', 'two is the second'], ...

javascript

Tips for optimizing scrolling of a specific element with a letter parameter

For my web application project, I am trying to implement a feature where clicking on a letter will scroll to display the relevant content. Below is the JavaScript code snippet: <script> import Bscroll from 'better-scroll' export default ...

javascriptvue.js

The event listener for changing radio buttons

Imagine we have two radio buttons <input type="radio" value="val1" name="radio1" onChange="change()"/> <input type="radio" value="val2" name="radio1" onChange="change()&quo ...

javascripthtmljqueryreactjsdom

What is the best way to simulate an unexported function in Javascript jest environments?

Testing a module in my vuejs project is what I'm currently focusing on. import { getBaseUrl } from "@/application/api/baseUrl"; export default ( uri: string, requestBody: Record<string, string | number> ): void => { let form ...

javascriptvue.jsunit-testingjestjs

Inaccurate results from MomentJS

When converting milliseconds to date and time using Moment, I am getting the correct output as expected. However, when converting the same date and time, it gives me incorrect output. I have utilized the unix and valueOf Moment methods. const moment = re ...

javascriptnode.jsdatemomentjsmoment-timezone

Leveraging external variables in a webpack bundle

I am working on a single page app using Vue and Webpack. Typically, Webpack generates a bundle with various chunks such as app.js and vendor.js. Currently, I am in the process of putting this static spa distribution into a Docker container. My main quest ...

javascriptdockerwebpackvue.js

There is an error appearing in my .ts code: [ts] The property 'name' is not found in type 'any[]'

While my coding is working fine and data is showing on the page, there seems to be an error occurring in the VSE editor. It is showing something like this: [ts] Property 'name' does not exist on type 'any[]'. This is a snippet of my ...

javascriptangulartypescriptangular6

Could there be a more efficient method to enable support for all video formats?

I have a case statement in my video validation function that checks for specific file extensions of video formats. However, I am wondering if there is a shorter way to write the code in order to allow all video formats instead of creating a long list of al ...

javascriptjquerycase

Verify whether a string includes any of the elements within an array

Imagine I have a string: const subject = "This process is flawless" and an array: const matchArray = ["process","procedure","job"] If subject contains any keyword from matchArray, I want to do the following: if (su ...

javascriptnode.js

Utilizing @nuxtjs/fontawesome icons with buefy: A step-by-step guide

I included icons from @nuxtjs/fontawesome in my Nuxt SSR project. However, when I try to use them within a Buefy input, the icons do not render. Is there a way to make these two libraries work together seamlessly? Here is a CODESANDBOX example showcasing ...

vue.jsnuxt.jsfont-awesomebuefy

Creating a unique array of objects in ES6 using a `Set` to

I recently discovered this interesting method for creating unique arrays using ES6: [ ...new Set(array) ] It worked well for me until I attempted to use it with an array of objects, and unfortunately, it did not return a unique array as expected. For ex ...

javascriptarraysecmascript-6

Utilizing erb within a coffeescript file for modifying the background styling

Is there a way to change the background image of a div based on user selection from a dropdown menu? For instance, if the user picks "white" the background image becomes white, and for "red" it changes to red. I'm struggling with this in coffeescript ...

javascriptcssruby-on-railscoffeescripterb

Traversing an array of objects can result in an extraneous comma being displayed in the markup

View screenshot showing unwanted comma in output Hello there, I'm currently working on a gold shop website and dealing with an array of product objects. When mapping through this array to display products on the main page, I've encountered an is ...

javascriptarrays

Developing a way to make vue-custom-element compatible for embedding in external websites

I've been exploring ways to use a component from my Vue website on another site by embedding it in HTML. I came across https://github.com/karol-f/vue-custom-element and found this helpful guide. After installing the npm packages vue-custom-element an ...

javascriptvue.jswebpack

Creating a Robust Next.js Build with Tailor-Made Server (Nest.js)

I'm in need of assistance with compiling/building my project using Next.js while utilizing a custom server. Currently, I have integrated Nest.js (a TypeScript Node.js Framework) as the backend and nested Next.js within it. The integration seems to be ...

javascriptreactjstypescriptnext.jsnestjs