我有
<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.
有人可以给我一些提示吗?
最佳答案
这似乎是一个很简单的错误:
: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/