This is a part of a Vue-routes application, in one of the routes I have two properties, bga and bgb that will be used to change the colors of divs. I do not know how to declare them correctly, how do I do that?

I get this messages in the Chrome console:

• vue.js:597 [Vue warn]: The "data" option should be a function that returns a per-instance value in ponent definitions. warn @ vue.js:597

• vue.js:597 [Vue warn]: Property or method "bga", "bgb" 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. See: .html#Declaring-Reactive-Properties.

ColorPage.js

const ColorPage = {
    props:
        ['bga', 'bgb'],
    data: {
        bga: {
            backgroundColor: ''
        },
        bgb: {
            backgroundColor: ''
        }
    },
    template: `
<div id="middle">
    <label id="colorLabel"><h2>'Change Colors By Typing Their Names:'</h2></label>
    </br>
    <input type="text" class="colorInput" v-on:input="bga.backgroundColor = $event.target.value" placeholder="here...">
    </br>
    <input type="text" class="colorInput"  v-on:input="bgb.backgroundColor = $event.target.value" placeholder="... and here!">
</div>
`
    ,

};

export default ColorPage

This should be used to change the colors of the "container" div and the "top" div:

Index.html

    <div id="container" v-bind:style="bga">
        <div class="top" v-bind:style="bgb">
            <div id="app">
                <h1 id="vueHead">Vue routing</h1>
                <h2 class="menu">
                    <router-link to="/">Color</router-link>
                    <router-link to="/main">Main</router-link>
                    <router-link to="/settings">Settings</router-link>
                    <router-link to="/vue">Vue</router-link>
                </h2>
    
            </div>
        </div>
          <router-view></router-view>
    </div>

Vue routes is place in index.js:

import MainPage from '../ponents/mainPage.js'
import ColorPage from '../ponents/colorPage.js'

const routes = [
    {path: '/', ponent: ColorPage},
    {path: '/main', ponent: MainPage},
    
];
const router = new VueRouter({
    routes // short for `routes: routes`
});

var vm = new Vue({
    el: '#container',
    router,
});

This is a part of a Vue-routes application, in one of the routes I have two properties, bga and bgb that will be used to change the colors of divs. I do not know how to declare them correctly, how do I do that?

I get this messages in the Chrome console:

• vue.js:597 [Vue warn]: The "data" option should be a function that returns a per-instance value in ponent definitions. warn @ vue.js:597

• vue.js:597 [Vue warn]: Property or method "bga", "bgb" 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. See: https://v2.vuejs/v2/guide/reactivity.html#Declaring-Reactive-Properties.

ColorPage.js

const ColorPage = {
    props:
        ['bga', 'bgb'],
    data: {
        bga: {
            backgroundColor: ''
        },
        bgb: {
            backgroundColor: ''
        }
    },
    template: `
<div id="middle">
    <label id="colorLabel"><h2>'Change Colors By Typing Their Names:'</h2></label>
    </br>
    <input type="text" class="colorInput" v-on:input="bga.backgroundColor = $event.target.value" placeholder="here...">
    </br>
    <input type="text" class="colorInput"  v-on:input="bgb.backgroundColor = $event.target.value" placeholder="... and here!">
</div>
`
    ,

};

export default ColorPage

This should be used to change the colors of the "container" div and the "top" div:

Index.html

    <div id="container" v-bind:style="bga">
        <div class="top" v-bind:style="bgb">
            <div id="app">
                <h1 id="vueHead">Vue routing</h1>
                <h2 class="menu">
                    <router-link to="/">Color</router-link>
                    <router-link to="/main">Main</router-link>
                    <router-link to="/settings">Settings</router-link>
                    <router-link to="/vue">Vue</router-link>
                </h2>
    
            </div>
        </div>
          <router-view></router-view>
    </div>

Vue routes is place in index.js:

import MainPage from '../ponents/mainPage.js'
import ColorPage from '../ponents/colorPage.js'

const routes = [
    {path: '/', ponent: ColorPage},
    {path: '/main', ponent: MainPage},
    
];
const router = new VueRouter({
    routes // short for `routes: routes`
});

var vm = new Vue({
    el: '#container',
    router,
});

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

1 Answer 1

When you're creating a ponent there's slight differences between some of the typical syntax with Vue. For instance Data Must Be a Function.

..
data: {
  reactive: true,
}
..

In a standard Vue instance the above is perfectly fine. However when you create a ponent the data property needs to be a function that returns an object:

..
data() {
  return { reactive: true }
}
..

Additionally props are available to you just the same as any other property in data.