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 구성 요소가 item은 마치 data 개체의 일부인 것처럼 템플릿에 렌더링 할 수 있습니다.