VUEJS Binding Image urls dynamically

Question

This is my JSON data which has the buttons and image URL mappings:

     buttonDetails=  [ {
            "name": "button1",
            "images": [{
                    "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                },
                {
                    "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                },
                {
                    "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
                }
            ]
        },

    {
        "name": "button2",
        "images": [{
                "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
            },
            {
                "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
            },
            {
                "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
            }
        ]},
    {
        "name": "button3",
        "images": [{
                "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
            },
            {
                "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
            },
            {
                "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png"
            }
        ]

}]

Template Code which renders all the buttons and the image related to button1 while page loads:

<template>
                 <ul class="images-list" v-for="(button,index) in buttonDetails" v-if="index == button1">
                <li  v-for="image in button.images" v-if="image.style=='750WX750H'">

                    <img :src="image.url" alt="" @click="zoom1 = true"  @mousemove="moveBG">
                    <div class="image-hover" :style="{ backgroundImage: 'url(' + image.url + ')' }"></div>
                    <modal v-model="zoom1" class="image-zoom">
                        <div>
                            <img :src="image.url" :style="{transform:'translateY(' + translateY   + 'px)'}" @mousemove.self="onMouseMove($event)">
                        </div>
                    </modal>
                </li>

            </ul>

             <ul class="button-list">
                    <li v-for="button of this.buttonDetails">{{button.name}}</a></li>
                </ul>
            </template>

So based on every button click I have to change the image source as per the given JSON in the Buttondetails variable. Kindly guide me.

Each and every button looped below has its associated images. Only one button and its corresponding images set will be active at a given point of time. Please help me in achieving this.

are you able to put this code in snippet so we can correct it — Hardik Satasiya
– Hardik Satasiya, Commented Dec 25, 2017 at 13:58
@ Hardik Satasiy , here i have added jsfiddle.net/kumar_gowtham/rx4znhp4 — oldrock
– oldrock, Commented Dec 25, 2017 at 14:08
sorry but your code does not match to markup as v-if="image.style=='750WX750H' so there is no style in JSON as well jsfiddle has error and translateY is missing, just make minimal markup what you needed rest remove, so code can run without error — Hardik Satasiya
– Hardik Satasiya, Commented Dec 25, 2017 at 15:00
@oldrock: People would like to help you, but you've got to help them help you. It is very unclear what you are trying to achieve and your existing code is broken. — 76484
– 76484, Commented Dec 25, 2017 at 22:25
oh sorry for that. Below answer worked. Thanks all for helping. — oldrock
– oldrock, Commented Dec 26, 2017 at 5:02

76484 · Accepted Answer · 2017-12-26 03:08:09Z

The content of your question and the example code make it difficult to understand what you are trying to achieve and what isn't working. It might be advantageous for you to review the criteria for creating a minimal, complete and verifiable example.

If I understand your issue correctly, you desire to show only the images associated with the currently active button. Clicking a button should cause it to become the active button and to have its associated image list rendered.

Since you are creating an unordered list, <ul>, for each set of images, I would suggest that your goal not be to dynamically update any image sources, but rather to show and hide these lists as the active index changes.

Also, with the structure of your buttonDetails data, I think it will be easier for you to store the index in the buttonDetails Array of the currently active object (0, 1, 2, etc.), rather than store the name of the currently active button (ex., "button1").

The first step, then, would be to add an activeIndex property to our data. We can default the value to 0 so that the first image set will get rendered on page load.

data: {
    activeIndex: 0,
    buttonDetails: [
        // TODO: buttonDetails data goes here.
    ]
}

Next, in our template, where we create a <ul> for each item in buttonDetails, we will compare the index of each item against the activeIndex in order to determine if it should be rendered:

<ul
    class="images-list"
    v-if="index === activeIndex"
    v-for="(button, index) in buttonDetails">
    <!-- TODO: <li> template goes here. -->
</ul>

Finally, we will attach a click event handler to our buttons that will update our activeIndex. We will update our template with the following:

<ul class="button-list">
    <li v-for="(button, index) in this.buttonDetails">
        <button @click="onButtonClick(index)">{{button.name}}</button>
    </li>
</ul>

And add the onButtonClick handler to our methods object on our root Vue instance:

onButtonClick: function (index) {
    this.activeIndex = index;
}

I have created a fiddle for your reference.

Collectives™ on Stack Overflow

VUEJS Binding Image urls dynamically

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related