如何在循环中创建组件? [英] How to create components in a loop?

问题描述

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

我发送了一个 axios 请求，在回答之后我想一张一张地插入每张照片，但每张照片必须是一个 vue 组件.

 axios.get('/api/prepare?query='+encodeURIComponent(this.text)).then(函数(结果){const result_data = result.data;self.images = result_data.images;让索引 = 0;for(让图像在 result_data.images 中){新的 Vue({el : "#photo",模板:Photo.vue"，数据 : {src : result_data.images[image].src,符号标识:图像，photoId : result_data.images[image].photo_id,名称:索引}});指数++；}

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

但我在控制台中收到错误

<块引用>

找不到元素:#photo

解决方案

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

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

<div id="应用程序"><div v-for="照片中的照片"><my-photo-component :image_source="photo.src"></my-photo-component>

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

I have a project that creates photos. I want every photo to be a vue component.

I send an axios request and after the answer I want to insert each photo one by one, but each photo must be a 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++;
                        }

in my template i have <div id="photo"></div>

but i get an error in console

Cannot find element: #photo

解决方案

First, define a reusable component using props to pass data down to it:

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

Then, we can use this component in a v-for loop:

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

The above is obviously missing some key pieces, such as the actual data you need. You will need to expand upon this toy example in order to achieve what you want. But this should push you in the right direction.

这篇关于如何在循环中创建组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！