vue-router creating link but pops console error

Question

Can someone explain to me why I get error in console

app.js:12666 TypeError: Cannot read property 'uuid' of undefined
    at Proxy.render (app.js:95774)
    at VueComponent.Vue._render (app.js:15384)
    at VueComponent.updateComponent (app.js:13674)
    at Watcher.get (app.js:14017)
    at new Watcher (app.js:14006)
    at mountComponent (app.js:13678)
    at VueComponent.Vue$3.$mount (app.js:19232)
    at VueComponent.Vue$3.$mount (app.js:21567)
    at init (app.js:14980)
    at createComponent (app.js:16419)

but links that I get in my page are fine?

Vue file looks like this

<template>
    <div class="main-container">
        <h1 class="page-title">Protocols</h1>

        <div class="wrapper">
            <router-link :to="`/protocol/${protocolListObject.protocol.uuid}/edit`" class="dropdown-item">Click to edit</router-link>
        </div>

        </div>
</template>


<script>
    import moment from 'moment'

    export default {

        data() {
            return {
                protocolListObject: {},
                error: {},
            }
        },
        created() {
            axios.post('/getSingleProtocol/:uuid')
                .then((response) => this.protocolListObject = JSON.parse(response.data))
                .catch(error => console.log(error.response));
        },
        mounted() {

        }
    }
</script>

and app.js looks like this (I'll remove routes and some things that are irrelevant for this just to make it shorter)

window.Vue = require('vue');
import Vue from 'vue'
import VueRouter from 'vue-router'
import moment from 'moment'
Vue.use(VueRouter)
let ProtocolSummary = Vue.component('protocol-summary', require('./components/ProtocolSummary.vue'));
let ProtocolEdit = Vue.component('protocol-edit', require('./components/ProtocolEdit.vue'));

const routes = [
    { path: '/protocol/:uuid', component: ProtocolSummary },
    { path: '/protocol/:uuid/edit', component: ProtocolEdit },
]
const router = new VueRouter({
    mode: 'history',
    routes // short for `routes: routes`
})
Vue.prototype.moment = moment
const app = new Vue({
    router
}).$mount('#app');

but when I load page I get a link with UUID that I need, but that console error looks terrible and I wanna get rid of it

There isn't such a `protocolListObject.protocol.uuid` property when the components are mounted, so the error is thrown. Later, the axios request sets the property, and Vue updates the link. — yuriy636, Nov 18 '17 at 15:53
@yuriy636 that is correct, the initial value of protocolListObject is an empty array, since this is inside URL any way to fetch it to avoid the error? — ggoran, Nov 18 '17 at 16:01
@yuriy636 thanks it solved my problem will answer it down, you lead me to right direction — ggoran, Nov 18 '17 at 16:08

score 0 · Accepted Answer · answered Nov 18 '17 at 16:12

The issue like yuriy said in the comment above was that initially, my variable was empty. Adding variable from URL solved problem (in vueJS file)

        data() {
            return {
                protocolListObject: {
                    protocol: {
                        uuid: this.$route.params.uuid
                    }
                },
                error: {},
            }
        },

vue-router creating link but pops console error

1 Answers1