ループ内にコンポーネントを作成する方法は？

Question

写真を作成するプロジェクトがあります。すべての写真をvueコンポーネントにしたい。

私はAxiosリクエストを送信し、答えの後にそれぞれの写真を1つずつ挿入したいが、各写真はvue-componentでなければならない。私のテンプレートで

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ループでこのコンポーネントを使用することができます。あなたが望むものを実現するためには、このおもちゃの例を拡張する必要があります。しかし、これはあなたを正しい方向に押しやるはずです。