0
我在vue路由中遇到问题。问题是vue路由不是渲染数据属性vue js实例的'people'。请指导我这里有什么问题。这是我的代码。Vue路由不是渲染vue实例的数据属性vue js
控制台错误:
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>
谢谢您@Nora –