Passing dynamic data to Vue params/routes

Question

I'm fairly new to Vue and am struggling to get something to work. Not entirely sure if this is possible but I'll ask and we'll see what the Stack Overflow gods have to conjure.

I wanted to know if it is possible to store component data/props for lots of IDs inside the data () portion of the default export.

So the {{$route.params.id}} manages to capture the id from the end of the url, but I want to know whether I can then have the View return other data stored somewhere in a component. So essentially is it possible for me to store data for let's say 5 different IDs all inside the Project.Vue file, or do I simply have to make 5 different files (Project1.Vue, Project2.Vue etc) and then set them all up as separate routes?

So far I have tried adding addings bits to the data () element such as

    data () {
        return {
            msg: 'Projects',
            id: [{ 1: 'hi'}, {2: 'hey'}],
            two: 'project two',
            three: 'project three',
        }
    }

And then referencing id inside the <template> but that didn't work as it simply returned the whole object. I also tried decoupling as mentioned here: https://router.vuejs.org/en/essentials/passing-props.html but had no joy with that either.

Apologies for my poor explanation but I hope somebody can help to shed light on whether this is possible. Code used below:

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Contact from '@/components/Contact'
import About from '@/components/About'
import Projects from '@/components/Projects'


Vue.use(Router)

export default new Router({
  routes: [
    {
        path: '/',
        name: 'Home',
        component: Home
    },

    {
        path: '/contact',
        name: 'Contact',
        component: Contact
    },

    {
        path: '/about',
        name: 'About',
        component: About
    },

    {
        path: '/projects',
        name: 'Projects',
        component: Projects
    },

    {
        path: '/projects/:id',
        name: 'Projects',
        component: Projects,
        props: {default: true}
    },

  ]
})

Projects.Vue

<template>
    <div id="projects">
    <h1>{{ header }} {{ $route.params.id }}</h1>
        {{id}}
    </div>
</template>



<script>
    export default {
        name: 'Projects',
        watch: {
            '$route'(to, from) {
                // react to route changes...
            }
        },
        data () {
            return {
                header: 'Projects',
            }
        }
    }
</script>


<style scoped>
</style>

If you don't show your effort SO will not be interested to help you. See how to ask. — Bhojendra Rauniyar
Sorry guys, I'm still getting to grips with SO etiquette. Have replaced screenshots with code. — Sunil Sandhu

Sunil Sandhu Sunil Sandhu · Accepted Answer · 2018-03-11T13:54:56

I have managed to figure it out.

In order to dynamically pass data based on the id passed in to the url, you need to create a data object and then inside of the of the <template>, you can pass in the object you have created but then pass the $route.params.id inside of the square brackets. However, it's worth noting that because the object created inside of your data() will use the zero index, it is worth adding a -1 inside of the template. See the below code to understand how it all works:

<template>
    <div id="projects">
    <h1>{{ msg }} {{ projects[$route.params.id - 1] }}</h1>
    </div>
</template>



<script>
    export default {
        name: 'Projects',
        watch: {
            '$route'(to, from) {
                // react to route changes...
            }
        },
        data () {
            return {
                projects: [
                    {   id: 1,
                        name: 'Project numero uno'
                    },
                    {   id: 2,
                        name: 'Project secundo'
                    },
                    {   id: 3,
                        name: 'Project three'
                    },
                ]
            }
        }
    }
</script>


<style scoped>
</style>

Passing dynamic data to Vue params/routes

1 Answers