Vue Route ist nicht Render-Daten Eigenschaft von Vue-Instanz in Vue Js

Ich habe ein Problem in Vue Route. Das Problem ist, dass vue route die Daten-Eigenschaft 'people' der vue js-Instanz nicht rendert. Bitte führen Sie mich, was ist das Problem hier. Hier ist mein Code.Vue Route ist nicht Render-Daten Eigenschaft von Vue-Instanz in Vue Js

Console Fehler:

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.

und meine laufenden Code auch hier: 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>

Quelle

2017-08-02 Zulfiqar Akram

Sie müssen wie so people in der create_or_edit Komponente bewegen:

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

Quelle

2017-08-02 07:32:28 Nora

Dank Sie @Nora –

Vue Route ist nicht Render-Daten Eigenschaft von Vue-Instanz in Vue Js

Antwort

Verwandte Themen