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>

以上显然缺少一些关键部分，例如您需要的实际数据。您将需要扩展此玩具示例以实现您想要的效果。但这应该会把你推向正确的方向。

如何在循环中创建组件？

1 个答案: