Question

这是我的JSON数据，它包含按钮和图像URL映射：

     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"
            }
        ]

}]

模板代码，在页面加载时呈现与button1相关的所有按钮和图像：

<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>

因此，基于每个按钮单击，我必须根据Buttondetails变量中给定的JSON更改图像源。请指导我。

下面循环的每个按钮都有相关的图像。在给定的时间点，只有一个按钮及其相应的图像集将处于活动状态。请帮助我实现这一目标。

Answer 1

您的问题内容和示例代码使您很难理解您要实现的目标和不起作用的内容。您可能有利于查看creating a minimal, complete and verifiable example的条件。

如果我正确理解您的问题，您只希望显示与当前活动按钮相关联的图像。单击按钮应该使其成为活动按钮并呈现其关联的图像列表。

由于您要为每组图片创建unordered list，<ul>，我建议您的目标不是动态更新任何图片来源，而是将这些列表显示和隐藏为活跃指数发生变化。

此外，根据buttonDetails数据的结构，我认为您可以更轻松地将索引存储在当前活动对象的buttonDetails数组中0，{ {1}}，1等），而不是存储当前有效按钮的2（例如，name）。

然后，第一步是向我们的数据添加"button1"属性。我们可以将值默认为activeIndex，以便在页面加载时呈现第一个图像集。

接下来，在我们的模板中，我们为data: { activeIndex: 0, buttonDetails: [ // TODO: buttonDetails data goes here. ] }中的每个项目创建<ul>，我们会将每个项目的buttonDetails与index进行比较，以便确定是否应该渲染：

activeIndex

最后，我们会将一个点击事件处理程序附加到我们的按钮上，这些按钮将更新我们的<ul class="images-list" v-if="index === activeIndex" v-for="(button, index) in buttonDetails">  </ul>。我们将使用以下内容更新我们的模板：

activeIndex

将<ul class="button-list"> <li v-for="(button, index) in this.buttonDetails"> <button @click="onButtonClick(index)">{{button.name}}</button> </li> </ul>处理程序添加到我们的根Vue实例上的onButtonClick对象中：

methods

我创建了一个fiddle供您参考。

VUEJS绑定图像动态链接

1 个答案: