Question

我在vue路线上遇到问题。问题是vue route不是渲染数据属性＆＃39; people＆＃39; vue js实例。请指导我这里有什么问题。这是我的代码。

控制台错误：

财产或方法＆＃34;人员＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。

以及我在此处运行的代码：JsFiddle Code

<body>
            <div id="vue-app">
                <router-link to='/list'>Show People List</router-link>
                <!-- router outlet -->
                <router-view></router-view>
            </div>
            <script src="https://unpkg.com/vue/dist/vue.js"></script>
            <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
            <script type="text/x-template" id="list_template">
                <div>
                    <div v-for="person in people ">
                        <p v-text="person.name"></p>
                    </div>
                    <p>create display here </p>
                </div>

            </script>


            <script type="text/javascript">
                const list = {
                    template: '#list_template'
                };
                const routes = [
                    {path: '/list', component: list,},
                ];

                const router = new VueRouter({
                    routes: routes,
                });

                const app = new Vue({
                    router: router,
                    data(){
                        return {
                            people: [
                                {name: "Ali"},
                                {name: "Kamran"},
                                {name: "Qaiser"},
                            ],
                        }
                    }
                }).$mount('#vue-app')
            </script>

Answer 1

您需要在people组件中移动create_or_edit，如下所示：

const create_or_edit = {
    template: '#create_template',
    data(){
        return{
         people: [
                {name: "Ali"},
                {name: "Kamran"},
                {name: "Qaiser"},
            ],
        }
    }
};
const routes = [           
    {path: '/create', component: create_or_edit,},           
];

const router = new VueRouter({
    routes:routes,
});

const app=new Vue({
    router:router,
}).$mount('#vue-app')

Vue路由不是vue js中vue实例的渲染数据属性

1 个答案: