[Vuejs]-VUEJS Binding Image urls dynamically

by

2👍

✅

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.

👤76484

Leave a comment