Gabotronix
3 months ago

Vue: rendering images/components with v-for

Posted 3 months ago by Gabotronix

Hi everybody, I have an app section where various images are showcased, I get this images from an array and I lop through them with v-for to rener them in my component, now inside of that array I added a 'component' property instead of image, I want to render a compnent by name instead of image when specified in my array.

This is my array (backend), I do a json_encode to get it into my frontend (vue).

$globals['bioItems'] = [
            [ 'image' => '/img/misc/pelo-1.jpg', 'component' => false, 'title' => '' ],
            [ 'image' => false, 'component' => 'layout-image-1', 'title' => '' ],
            [ 'image' => '/img/misc/pelo-3.jpg', 'component' => false, 'title' => '' ],
            [ 'image' => '/img/misc/pelo-4.jpg', 'component' => false, 'title' => '' ],
            [ 'image' => '/img/misc/pelo-5.jpg', 'component' => false, 'title' => '' ],
            [ 'image' => '/img/misc/pelo-6.jpg', 'component' => false, 'title' => '' ],   
        ];

And in my component this is how I render the list of images:

<div class="LAYOUThub1_center_row_item_container" v-if="showImages">
            <div class="LAYOUThub1_center_item33_container" v-for="(item,index) in globals.bioItems" :key="index+'F'">
                <transition :name="transitionByIndex(index)" appear>
                <div class="LAYOUThub1_center_item33_image" :style="'background-image:url('+item.image+');'"></div>
                </transition>
            </div>
        </div>

How can I do this?

Please sign in or create an account to participate in this conversation.