Question

这是Vue-routes应用程序的一部分，在其中一个路由中我有两个属性，bga和bgb将用于更改div的颜色。我不知道如何正确地声明它们，我该怎么做？

我在Chrome控制台中收到此消息：

vue.js：597 [Vue警告]：＆＃34;数据＆＃34; option应该是一个在组件定义中返回每个实例值的函数。警告@ vue.js：597
vue.js：597 [Vue警告]：财产或方法＆＃34; bga＆＃34;，＆＃34; bgb＆＃34;未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。请参阅：https://vuejs.org/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

这应该用于改变＆＃34;容器的颜色＆＃34; div和＆＃34; top＆＃34; 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路线位于index.js：

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

const routes = [
    {path: '/', component: ColorPage},
    {path: '/main', component: MainPage},

];
const router = new VueRouter({
    routes // short for `routes: routes`
});

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

Answer 1

当您创建组件时，某些典型语法与Vue之间存在细微差别。例如Data Must Be a Function。

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

在标准的Vue实例中，上述情况非常好。但是，在创建组件时，data属性需要是一个返回对象的函数：

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

此外props可与data中的任何其他媒体相同。

如何在Vue.js

1 个答案: