VUEJS 动态绑定图片 url答案

【问题标题】：VUEJS Binding Image urls dynamicallyVUEJS 动态绑定图片 url
【发布时间】：2018-06-06 16:10:58
【问题描述】：

这是我的 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 更改图像源。请指导我。

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

【问题讨论】：

你能把这段代码放到sn-p里让我们改正吗
@Hardik Satasiy，我在这里添加了jsfiddle.net/kumar_gowtham/rx4znhp4
抱歉，但您的代码与 v-if="image.style=='750WX750H' 的标记不匹配，因此 JSON 中也没有样式，jsfiddle 有错误，并且缺少 translateY，只需将您需要的标记做最少的其余删除，所以代码可以正常运行
@oldrock：人们愿意帮助你，但你必须帮助他们帮助你。非常不清楚您要达到什么目标，并且您现有的代码已损坏。
对不起。下面的答案有效。感谢大家的帮助。

标签： javascript laravel-5 vue.js

【解决方案1】：

您的问题内容和示例代码使您难以理解您想要实现的目标和无效的目标。查看creating a minimal, complete and verifiable example 的标准可能对您有利。

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

由于您要为每组图像创建unordered list、<ul>，我建议您的目标不是动态更新任何图像源，而是在活动索引更改时显示和隐藏这些列表.

另外，使用buttonDetails 数据的结构，我认为将索引存储在当前活动对象的buttonDetails 数组中会更容易（0、1、2等），而不是存储当前活动按钮的name（例如，"button1"）。

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

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

接下来，在我们的模板中，我们为buttonDetails 中的每个项目创建一个<ul>，我们会将每个项目的index 与activeIndex 进行比较，以确定是否应该渲染它：

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

最后，我们将在按钮上附加一个点击事件处理程序，以更新我们的activeIndex。我们将使用以下内容更新我们的模板：

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

然后将onButtonClick 处理程序添加到我们根Vue 实例上的methods 对象：

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

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

【讨论】：