Passing dynamic data to Vue params/routes

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>

1 answer

  • answered 2018-03-11 13:54 Sunil Sandhu

    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>