如何在循环中创建组件？

Question

我有一个创建照片的项目。我希望每张照片都是一个 vue 组件。

我发送了一个 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++;
                        }

在我的模板中我有<div id="photo"></div>

但我在控制台中遇到错误

找不到元素：#photo

Answer 1

首先，使用props 定义一个可重用组件，将数据向下传递给它：

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

然后，我们可以在v-for 循环中使用这个组件：

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

上面显然遗漏了一些关键部分，比如你需要的实际数据。您将需要扩展这个玩具示例以实现您想要的。但这应该会将您推向正确的方向。