[Vuejs]-Vue JS Dynamicly change img

by

0👍

If you haven’t already, I suggest you read List Rendering and Event Handling in the documentation.

I haven’t tested it but you could do something like the below, i.e. make an array that contains all your images, loop through them in the template and then when you click one of them, update a property that shows the clicked image.

<div>
    <div class="textcols-item3" v-for="imgSrc in imgSrcs">
        <img 
            :src="imgSrc" 
            style="cursor: pointer;"
            width="80" 
            @click="clickedImgSrc = imgSrc"
            height="80" />
    </div>

    <div>
        <img 
            :src="clickedImgSrc"
            width="200"
            height="200"
            v-if="clickedImgSrc && clickedImgSrc.length" />
    </div>
</div>

export default {
    name: 'App',
    data() {
        return {
            clickedImgSrc: null,
            imgSrcs: [
                require('/src/assets/svg/krug.svg'),
                require('/src/assets/svg/kriv-kerekrest.svg'),
                require('/src/assets/svg/maloe-perekrest.svg'),
                require('/src/assets/svg/norm-perekrestie.svg'),
                require('/src/assets/svg/rec.svg'),
                require('/src/assets/svg/zakrash-krug.svg')
            ]
        }
    }
}

Leave a comment