[Vuejs]-Passing dynamic data to Vue params/routes

by

0👍

✅

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>

Leave a comment