Vue.js：属性或方法未在实例上定义，但在渲染期间引用

Posted 2023-02-16

【中文标题】Vue.js：属性或方法未在实例上定义，但在渲染期间引用

【英文标题】：Vue.js : Property or method is not defined on the instance but referenced during render

【发布时间】：2022-01-18 02:25:40

【问题描述】：

我有

<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 警告]：属性或方法“dasboard”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

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

【参考方案1】：

在 props 中使用原始值时使用绑定符号 : 意味着值应该作为属性存在于脚本选项中：

 <MainPanel title="Dashboard" icon="dasboard" />

【参考方案2】：

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

:title="Dashboard"

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

【参考方案3】：

根据Vue2 official guide，props可以简单地从属性中获取值或者通过v-bind来实现响应式。

所以在这种情况下，您可能希望使用title 而不是:title。

<MainPanel title="Dashboard" icon="dasboard" />

如果您想让 MainPanel 标题可以响应更改，那么您可以在 data 中添加一个变量并通过 v-bind：

<MainPanel :title="varaibleForTitle" :icon="varaibleForIcon" />

顺便说一句，您可以通过v-bind 传递一个字符串值——尽管我不明白为什么有人要这样做。

<MainPanel :title="'MainPanel'" :icon="'dasboard'" />

干杯。