vue.js, vue-router and parameters/props

Question

I'm running Vue.js with vue-router, and are trying to pass parameters to my template.

This is my route:

{ path: '/car/:id', component: car, props: true },

This is my template Car.vue :

<template>
    <h2>{{ id }}</h2>
</template>

<script>
    export default {
        props: ['id']
    },
    methods: {
        getCar: function () {
        axios.get('http://my-api/car/' + id)
            .then((response) => {
                this.car = response.data
            })
            .catch((error) => {
                console.log(error)
            })
    }
</script>

I'm getting the error:

  ✘  http://eslint.org/docs/rules/no-undef  'id' is not defined

But the id is shown in h2 , but not used in the api call.

Answer 1

Use your props using this . this.id will solve your problem.