Vue.jsは、私はこのようになりますVue.jsで親コンポーネントに持つ両親データ

Question

と子compenentをレンダリング例えば{{ item.title }}のようなテンプレートのような構造。プレビューは正しく読み込まれますが、レンダリングされません。

私はVue 2.0で可能かどうかは分かりませんが、うまくいけば誰かが同じ問題を抱えていて、ここで助けてくれるはずです。

EDIT（おかげパトリック）：

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

これはItem.vue内容と同様であるPreview.vueコンテンツです。 少し説明として：

テンプレートデータは、{{ item.title }}と他のプレースホルダを含む定義済みのHTMLコンテンツとしてデータベースから取得されます。私は、これがアイテムから来る特定のものでレンダリングされることを望みます。

Answer 1

Vue.jsでは、コンポーネントは親からのデータに直接アクセスできません。 previewに{{ item.title }}を表示させる場合は、itemにpropとして渡す必要があります。だから、preview.vueで、このようにそれを宣言します。

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

を次に、あなたの親コンポーネントのテンプレートで、あなたは親のitems配列から何かにitem小道具v-bindできること：

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

は、今すぐあなたのpreviewコンポーネントが持っていますあたかもそれがdataオブジェクトの一部であるかのようにそのテンプレートでレンダリングできるitemです。