CODEWITHSUNDEEP
vue.jsnuxt.js
user8566930
user8566930

Reputation: 133

Nuxt Props pass to data and set images

how do i pass props into data ? i have a object that pass into prop and i want prop to set the image url with data "mainImage", must keep the mainImage.

<template>
    <!-- start Product Header -->
    <div class="ps-product__header">
        <div class="ps-product__thumbnail" data-vertical="false">

            <div class="ps-wrapper">
                <div class="ps-product__gallery">
                    <div class="col-12 px-md-2 d-none d-md-block">
                        <div class="" style="cursor: pointer">
                            <b-img :src="mainImage" alt="" style="width: 100%" class="image" @click="showMainImage()"></b-img>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ps-product__variants">
                <div class="col-12 d-none d-md-block my-4">
                    <div class="row">
                        <div class="col-3" v-for="(image, index) in product.images" :key="index">
                            <div class="thumbnail" style="cursor: pointer" @click="changeMainImage(image.src)">
                                <b-img :src="`${image.src}`" style="width: 100%" alt="" class="image" :class="mainImage === image ? 'activess' : ''"></b-img>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      </div>
</div>

here is the script

 <script>
        export default {
            name: 'ShopHeader',
            props: {
                product: {
                    type: Object,
                    required: true
                }
            },
            data() {
                return {
                    mainImage: String,
                }
            },
            methods: {
                changeMainImage(image) {
                    this.mainImage = image
                }
            },
            mounted() {
                this.mainImage = this.product.image
                console.log(this.mainImage)
            }
    
        }
    </script>

sample : https://stackblitz.com/edit/nuxt-starter-pake3o?file=components%2FShopHeader.vue

when you type on the stackblitz url with /product, the image will show up but when you go through the link the image wont show up, so anyone know how to fix this problem ? i assume it was mounted only load once and component wont render after it.

Upvotes: 0

Views: 1398

Answers (1)

viryl15
viryl15

Reputation: 564

add v-if to tag

<img v-if="mainImage" :src="mainImage" class="image">

Upvotes: 1

Related Questions