루프에서 구성 요소를 만드는 방법은 무엇입니까?

Question

사진을 만드는 프로젝트가 있습니다. 나는 모든 사진을 가치 구성 요소로하고 싶다.

나는 액시오 요청을 보내고 답장을 보내고 나면 각 사진을 하나씩 삽입하고 싶지만 각 사진은 vue 구성 요소 여야합니다. 내 템플릿에

axios.get('/api/prepare?query='+encodeURIComponent(this.text)) 
       .then(function(result){ 
        const result_data = result.data; 
        self.images = result_data.images; 
         let index = 0; 
         for(let image in result_data.images){ 
          new Vue({ 
           el : "#photo", 
           template : "Photo.vue", 
           data : { 
            src : result_data.images[image].src, 
            symbolId : image, 
            photoId : result_data.images[image].photo_id, 
            name : index 
           } 
          }); 
          index++; 
         } 

내가 <div id="photo"></div>

가지고 있지만 난

찾을 수 없습니다 콘솔에서 오류가 발생 요소 :

Answer 1

먼저, props을 사용하여 재사용 가능한 구성 요소를 정의 #photo 데이터를 전달하는 방법 :

위의

<script> 
    new Vue({ 
     el: '#app', 
     data: { 
      photos: [] 
     } 
    }); 
</script> 

<div id="app"> 
    <div v-for="photo in photos"> 
     <my-photo-component :image_source="photo.src"></my-photo-component> 
    </div> 
</div> 

을 분명히 그런 당신이 필요로하는 실제 데이터와 같은 몇 가지 중요한 부분을 누락 :

<script> 
    Vue.component('my-photo-component', { 
     template: `<img :src="image_source"/>`, 
     props: ['image_source'], 
     data: function() { 
      return { 
       other: 'data' 
      }; 
     } 
    }); 
</script> 

다음, 우리는 v-for 루프에서이 구성 요소를 사용할 수 있습니다. 당신이 원하는 것을 얻기 위해서이 장난감 예제를 확장해야 할 것입니다. 그러나 이것은 올바른 방향으로 당신을 밀어야합니다.