Vue路由不是渲染vue實例的數據屬性vue js

我在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>

來源

2017-08-02 Zulfiqar Akram

您需要在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')

來源

2017-08-02 07:32:28 Nora

謝謝您@Nora –

Vue路由不是渲染vue實例的數據屬性vue js

回答

相關問題