javascript - Vue.js : Property or method is not defined on the instance but referenced during render

标签 javascript vue.js vuejs2 vue-component vue-router

我有

<template>
    <div class="dashboard">
        <Navbar />
        <MainPanel :title="Dashboard" :icon="dasboard" />
    </div>
</template>

<script>
import MainPanel from '../../components/MainPanel'
import Navbar from '../../components/Navbar'

export default {
    name: 'Dashboard',
    components: {
        Navbar,
        MainPanel
    }
}
</script>

如您所见,我正在尝试重用我的 MainPanel 组件。

主面板

<template>
    <v-container fluid class="my-5">
        <v-row>
            <v-flex col-xs-12>
                <v-card elevation="2" class="pb-15">
                    <v-flex xs12 class="text-center">
                        <v-card-title>
                            <v-btn dark text color="black">
                                <v-icon right class="mr-2">{{ icon }}</v-icon>
                                <span>{{ title }}</span>
                            </v-btn>
                        </v-card-title>
                    </v-flex>
                </v-card>
            </v-flex>
        </v-row>
    </v-container>
</template>
<script>
export default {
    name: 'MainPanel',
    props: {
        icon: String,
        title: String
    },
    data() {
        return {
            icon: '',
            title: ''
        }
    }
}
</script>
<style lang=""></style>

在控制台中,我不断收到此错误

[Vue warn]: Property or method "dasboard" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

enter image description here

有人可以给我一些提示吗?

最佳答案

这似乎是一个很简单的错误:

:title="Dashboard"

在 Vue 中使用列 (:) 在组件上添加 prop 或属性,将使用定义或在 props 或数据中定义的属性。 而如果你使用 title="dashboard" 你实际上会传递一个字符串,这就是你想要的

关于javascript - Vue.js : Property or method is not defined on the instance but referenced during render,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70354575/

相关文章:

javascript - 基于另一个数组的选择过滤数组

javascript - 根据条件显示/隐藏

javascript - 简单的 CoffeeScript for 循环从 End 到 0

webpack - 在 Vue.js 中加载外部 Javascript 文件

javascript - 如何从 axios post 请求中的 json 中删除反斜杠

javascript - 在父级 Vuejs 中更改子级的 props

javascript - 在 Javascript 中使用 Django 变量

javascript - $set 降低了 Vue 的性能

vuejs2 - 验证 : Navigation drawer: communicate v-model changes to parent co

vue.js - 如何在 ListView 中使用动态组件