Vue.js render compenent des enfants avec les données parents

Question

j'ai un composant parent dans Vue.js qui ressemble à ceci:

<template> 
<ul class="list-group"> 
    <li class="list-group-item" v-for="item in items"> 
     <div class="row"> 
      <div class="col-md-6"> 
       {{ item.title }} 
      </div> 
      <div class="col-md-6 text-right"> 
       <a href="#" class="btn btn-primary btn-sm"> 
        <span class="glyphicon glyphicon-pencil"></span> 
       </a> 
       <a href="#" class="btn btn-success btn-sm"> 
        <span class="glyphicon glyphicon-link"></span> 
       </a> 
       <a href="#" class="btn btn-danger btn-sm"> 
        <span class="glyphicon glyphicon-remove"></span> 
       </a> 
      </div> 

      <div class="col-md-12"> 
       <preview></preview> 
      </div> 
     </div> 
    </li> 
</ul> 
</template> 

Le script:

<script> 

import Preview from './Preview.vue'; 

export default { 

    data() { 
     return { 
      items: '', 
      template: [] 
     } 
    }, 

    created() { 
     this.fetchItems(); 
     this.$on('preview-build', function (child) { 
      console.log('new preview: ') 
      console.log(child) 
     }) 
    }, 

    components: { 
     Preview 
    }, 

    methods: { 

     fetchItems: function() { 
      var resource = this.$resource('api/preview'); 

      resource.get({}).then((response) => { 
       this.items = response.body.item; 
      }, (response) => { 
       console.log('Error fetching tasks'); 
      }).bind(this); 
     }, 

    } 

} 
</script> 

Le composant enfant "aperçu" a une structure semblable à un modèle, par exemple {{ item.title }} à nouveau. L'aperçu est chargé correctement mais il n'est pas rendu.

Je ne sais vraiment pas si c'est possible dans Vue 2.0 mais j'espère que quelqu'un a eu le même problème et peut m'aider ici.

EDIT (merci Patrick):

<template> 
    <textarea rows="20" class="form-control"> 
    {{ template.content }} 
    </textarea> 
</template> 

<script> 
    export default { 

     data() { 
      return { 
       template: [], 
      } 
     }, 

     created() { 
      this.fetchTemplate(); 
     }, 

     methods: { 

      fetchTemplate: function() { 
       var resource = this.$resource('api/preview'); 

       resource.get({}).then((response) => { 
        this.template = response.body.template; 
       }, (response) => { 
        console.log('Error fetching template'); 
       }).bind(this); 
      }, 

     } 

    } 
</script> 

Ceci est le contenu Preview.vue qui est similaire au contenu Item.vue. Comme une petite explication:

Les données de modèle proviennent d'une base de données en tant que contenu html prédéfini, y compris le {{ item.title }} et un autre espace réservé. Je veux que cela soit rendu avec les choses spécifiques provenant de l'objet.

Answer 1

Dans Vue.js, les composants ne peuvent pas accéder directement aux données de leur parent. Si vous voulez que preview soit capable de rendre {{ item.title }}, vous devrez lui donner item comme prop. Donc, en preview.vue, déclarer comme ceci:

export default { 
    ... 
    props: ['item'] 
} 

Ensuite, dans votre modèle de composant parent, vous pouvez v-bind que item prop à quelque chose de items tableau du parent:

<li class="list-group-item" v-for="item in items"> 
    ... 
    <preview v-bind:item="item"></preview> 
    ... 
</li> 

maintenant votre composant preview a un item qu'il peut afficher dans son modèle comme s'il faisait partie de l'objet data.