VUEJS Binding Bild-URLs dynamisch

Question

Dies ist meine JSON-Daten, die die Tasten und Bild-URL-Zuordnungen hat:

 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, der auf button1 während Seite geladen Zusammenhang alle Tasten und das Bild macht:

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

Also basierend auf jedem Knopf klicken muss ich die Bildquelle gemäß der angegebenen JSON in der Buttondetails Variable ändern. Bitte führe mich.

Jede Taste, die unten geschleift wird, hat ihre zugehörigen Bilder. Zu einem bestimmten Zeitpunkt sind nur ein Button und der zugehörige Bildersatz aktiv. Bitte helfen Sie mir dabei.

Answer 1

Der Inhalt Ihrer Frage und der Beispielcode machen es schwierig zu verstehen, was Sie erreichen möchten und was nicht. Es kann für Sie vorteilhaft sein, die Kriterien für creating a minimal, complete and verifiable example zu überprüfen.

Wenn ich Ihr Problem richtig verstanden habe, möchten Sie nur die Bilder anzeigen, die mit der gerade aktiven Schaltfläche verknüpft sind. Das Klicken auf eine Schaltfläche sollte dazu führen, dass sie zur aktiven Schaltfläche wird und die zugehörige Bildliste gerendert wird.

Da Sie einen unordered list, <ul> für jeden Satz von Bildern erstellen, würde ich vorschlagen, dass Sie keine Bildquellen dynamisch aktualisieren, sondern diese Listen als aktive Indexänderungen ein- und ausblenden.

Auch mit der Struktur Ihrer buttonDetails Daten, ich denke, es einfacher für Sie den Index im buttonDetails Array des gerade aktiven Objekt zu speichern (0, 1, 2, etc.), anstatt speichern die name der derzeit aktiven Schaltfläche (z. B. "button1").

Der erste Schritt wäre dann, unseren Daten eine activeIndex Eigenschaft hinzuzufügen. Wir können den Wert auf 0 setzen, damit der erste Bildsatz beim Laden der Seite gerendert wird.

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

Als nächstes wird in unserer Vorlage, wo wir ein <ul> für jedes Element in buttonDetails schaffen, werden wir die index jedes Postens gegen die activeIndex, um zu bestimmen, vergleichen, wenn es gemacht werden soll:

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

Schließlich werden wir einen Klickereignishandler an unsere Tasten anhängen, der unsere activeIndex aktualisiert. Wir werden unsere Vorlage mit dem folgenden Update:

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

und fügen Sie den onButtonClick Handler zu unserem methods Objekt auf unsere Wurzel Vue Beispiel:

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

ich einen fiddle für Ihre Referenz geschaffen haben.