Javascript VUEJS动态绑定图像URL_Javascript_Laravel 5_Vue.js

Javascript VUEJS动态绑定图像URL

javascript laravel-5 vue.js

Javascript VUEJS动态绑定图像URL,javascript,laravel-5,vue.js,Javascript,Laravel 5,Vue.js,这是我的JSON数据，包含按钮和图像URL映射： buttonDetails= [ { "name": "button1", "images": [{ "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bbbb.png" }, {

这是我的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>







{{button.name}

因此，基于每次单击按钮，我必须根据

Buttondetails

变量中给定的JSON更改图像源。请引导我

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

您问题的内容和示例代码使您很难理解您试图实现的目标和不起作用的目标。对您来说，查看的标准可能是有利的

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

由于您正在为每组图像创建一个，

，因此我建议您的目标不是动态更新任何图像源，而是在活动索引更改时显示和隐藏这些列表

另外，根据

buttonDetails

数据的结构，我认为将索引存储在当前活动对象的

buttonDetails

数组（

、

等）中比存储当前活动按钮的

名称

更容易

因此，第一步是向数据中添加

activeIndex

属性。我们可以将该值默认为

，以便在页面加载时呈现第一个图像集

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

接下来，在我们的模板中，我们为

按钮详细信息

中的每个项目创建一个

，我们将比较每个项目的

索引

与

活动索引

，以确定是否应该呈现：

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

并将

onbutton单击

处理程序添加到根Vue实例上的

方法

对象：

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

我已经创建了一个示例供您参考。