Vue.js 2 Komponenten Eltern Kind Artikel nicht definiert

Question

Ich bin neu zu vue und ich bekomme den Fehler referenceError: items is not defined. Kann jemand sehen, warum das passiert oder mir ein paar Hinweise geben?

Ich denke, es hat etwas damit zu tun, dass die items beim ersten Blick auf die Vorlage nicht gesetzt ist.

Mein Code:

<div id="root"> 
    <task-list></task-list> 
    <template id="my-parent"> 
     <table> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>id</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr is="task" v-for="item in items" :item="item"></tr> 
      </tbody> 
     </table> 
    </template> 

    <template id="my-child"> 
     <tr> 
      <td></td> 
      <td>{{ item.name }}</td> 
      <td>{{ item.id }}</td> 
     </tr> 
    </template> 

</div> 
<script> 



Vue.component('task-list', { 
template: '#my-parent', 
data: function() { 
     return { 
      items: [] 
     } 
    }, 
    methods: { 
    getMyData: function(val) { 

     var _this = this; 
     $.ajax({ 
      url: 'vuejson.php', 
      method: 'GET', 
      success: function (data) { 
       console.log(data); 
       _this.items = data; 
      }, 
      error: function (error) { 
       alert(JSON.stringify(error)); 
      } 
     }) 

    } 
    }, 
    mounted: function() { 
     this.getMyData("0"); 
    } 
}); 

Vue.component('task', { 

    template: '#my-child', 
    props: ['item'], 

    data: function() { 
     return { 
      item: {} 
     } 
    } 
}); 
new Vue({ 
    el: "#root", 

}); 

</script> 

Answer 1

Hier arbeitet modifizierten Code:

<template id="my-child"> 
    <tr> 
     <td>{{ item.name }}</td> 
     <td>{{ item.id }}</td> 
    </tr> 
</template> 
<template id="my-parent"> 
    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>id</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr is="task" v-for="item in items" :item="item"></tr> 
     </tbody> 
    </table> 
</template> 
<div id="root"> 
    <task-list></task-list> 
</div> 

Und js:

Vue.component('task-list', { 
    template: '#my-parent', 
    data: function() { 
    return { 
     items: [] 
    } 
}, 
methods: { 
getMyData: function(val) { 

    var _this = this; 
    _this.items = [{name: '1.name', id: 1}]; 
} 
}, 
mounted: function() { 
    this.getMyData("0"); 
} 
}); 

Vue.component('task', { 

template: '#my-child', 
props: ['item'], 

data: function() { 
    return { 
    } 
} 
}); 
new Vue({ 
el: "#root", 

}); 

jsfiddle

Es wäre viel einfacher für Sie mit vue zu arbeiten, wenn Sie zuerst einige Tutorials machen :)

edit: Und noch etwas: Wenn Sie Eigenschaft (Element in Ihrem Fall) deklarieren, verwenden Sie diesen Namen nicht in Daten . Also, was ich tat: - platziert Vorlagen außerhalb des Wurzelelement - entfernt „item“ aus Daten

Answer 2

Sie sollten Vorlagen beschreiben außerhalb div # root. Beispiel

<div id="root"> 
    <task-list></task-list> 
</div> 
<template id="my-parent"> 
     <table> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>id</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr is="task" v-for="item in items" :item="item"></tr> 
      </tbody> 
     </table> 
    </template> 

    <template id="my-child"> 
     <tr> 
      <td></td> 
      <td>{{ item.name }}</td> 
      <td>{{ item.id }}</td> 
     </tr> 
    </template> 

Denn wenn sie in #root sind sie Teil vue Beispiel sind für sie, und es gibt keine Artikel drin.

new Vue({ 
    el: "#root", 
    //no items 
});