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

Question

I’m facing a problem in vue route. The problem is vue route is not render data property 'people' of vue js instance. Please guide me what is the problem here. Here is my code.

Console Error:

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.

and also my running code available here: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>

Nora · Accepted Answer · 2017-08-02 07:32:28Z

1

You need to move people in the create_or_edit component like so:

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')

answered Aug 2, 2017 at 7:32

Nora

3,2812 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related