Vue.js 如何在循环中创建组件？

我有一个创建照片的项目。我希望每张照片都是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++;
                        }

我发送了一个axios请求，在回答之后，我希望逐个插入每张照片，但每张照片必须是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++;
                        }

在我的模板中，我有

但我在控制台中得到一个错误

找不到元素：#照片

---

首先，使用

props

定义一个可重用组件，以便将数据向下传递给它：

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

---

上述内容显然缺少一些关键部分，例如您需要的实际数据。你需要扩展这个玩具的例子，以达到你想要的。但这应该将您推向正确的方向。

我按照您所说的做了，但现在在cosole的下一个错误“您是否正确注册了组件？对于递归组件，请确保提供“name”选项。不幸的是，如果没有看到更新的代码，我将无法提供反馈。