I have

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

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

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

As you can see, I'm trying to reuse my MainPanel ponent.

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>

In the console, I kept getting this error

[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 ponents, by initializing the property.

Can someone please give me some hints ?

I have

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

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

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

As you can see, I'm trying to reuse my MainPanel ponent.

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>

In the console, I kept getting this error

[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 ponents, by initializing the property.

Can someone please give me some hints ?

• javascript
• vue.js
• vuejs2
• vue-ponent
• vue-router

3 Answers 3

It seems a very simple mistake:

:title="Dashboard"

in Vue using a column (:) to prepend a prop or an attribute on a ponent, will use a property defined or in props or in data. While if you use title="dashboard" you'll actually pass a string, that is what you want

Using the binding sign : when using raw values in props means that values should be present as properties inside the script options :

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

According Vue2 official guide, props can simply get value from attribute or pass by v-bind to achieve responsive.

So in this case, you might want to using title instead :title.

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

If you want to make MainPanel title can be change responsively then you can clam a variable in data and pass by v-bind:

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

By the way, you can pass a string value by v-bind - even though I don't understand why would anyone want to do this.

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