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

Question

我在 vue 路由中遇到问题。问题是 vue 路由不是 vue js 实例的渲染数据属性 'people'。请指导我这里有什么问题。这是我的代码。

控制台错误：

Property or method "people" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

还有我的运行代码可在此处获得：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

您需要像这样在 create_or_edit 组件中移动 people：

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 实例的渲染数据 属性

Vue route is not render data property of vue instance in vue js

vue.js

vue-router

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