Question

有人可以向我解释为什么我在控制台中出现错误

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)

但是我在页面中的链接很好吗？

Vue文件看起来像这样

<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>

和app.js看起来像这样（我会删除路线和一些与此无关的东西，只是为了缩短它）

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');

但是当我加载页面时，我得到了一个我需要的UUID链接，但是控制台错误看起来很糟糕，我想摆脱它

Answer 1

像yuriy这样的问题在上面的评论中说，最初，我的变量是空的。从URL解决问题中添加变量（在vueJS文件中）

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

vue-router创建链接但弹出控制台错误

1 个答案: