Vue.js Getting the right index from a array to send it to a div with data index-CodePudding

I need to get the index on the @focus (@click would be the same) to send the right text ()title and description in a div. (i'm new to Vue js and searched answer for hours).

  let arr = [{
      "id": 1,
      "title": "Taylor Swift - Look What You Made Me Do",
      "description": "Get Taylor Swift’s new album, reputation, including “Look What You Made Me Do,” here: http://smarturl.it/reputationTS\n\nhttp://vevo.ly/MOlgkR",
      "artist": "YouTube Spotlight",
      "youtube": "3tmd-ClpJxA",
      "thumb": "https://i.ytimg.com/vi/3tmd-ClpJxA/mqdefault.jpg"
    },
    {
      "id": 2,
      "title": "Charlie Puth - Attention [Official Video]",
      "description": "Download and Stream \"Attention\": https://Atlantic.lnk.to/AttentionID\n\nPre-Order Voicenotes: https://Atlantic.lnk.to/VoicenotesID\n\nExclusive VoiceNotes Merchandise Bundles Available Here: http://smarturl.it/VoiceNotesD2CYT\n\nVideo Directed by Emil Nava\n\nWritten By: Charlie Puth and Jacob Kasher\nProduced By: Charlie Puth\nVocal Production: Charlie Puth\nInstruments: Korg Triton Studio, Juno 60, Omnisphere, Trillian for the Bass, Rhodes 77, Yamaha DX7, Pro Tools I2, Fender Stratocaster, Martin HD-28 Acoustic\nMixed By: Manny Marroquin & Charlie Puth at Larrabee Sound Studios\nRecorded At: Home Studio of Charlie Puth & Tour Bus of Charlie Puth\nMastered By: Dave Kutch at the Mastering Palace\n\nStore - http://smarturl.it/CPAttentionMerchYT\n\nFollow Charlie:\nhttp://www.charlieputh.com\nhttp://www.twitter.com/charlieputh\nhttp://www.facebook.com/charlieputh\nhttp://www.instagram.com/charlieputh",
      "artist": "YouTube Spotlight",
      "youtube": "nfs8NYg7yQM",
      "thumb": "https://i.ytimg.com/vi/nfs8NYg7yQM/mqdefault.jpg"
    }]


  var myitem = new Vue({
    el: '#app',
    data: {
      items: arr
    },
  });

This is the loop:

<div v-cloak v-for="(item, index) in items" :key="item.id" v-on:focus="getSummary(index)">
<img v-bind:src="item.thumb" alt="">
</div>

From the getSummary(index) function i can get the right index. I need to send the current index to get the right Title and Description. Every time the item in the loop get focused, the title and the description should change accordingly to the focused item.

<div id="summary-container" v-cloak >
  <div id="summaryTitle" >{{ items[indexhere].title }}</div>
  <div id="summaryDate" >{{ items[indexhere].description }}</div>
  <div id="summaryDesc" ></div>
  <div id="summary-buttons-container" style="visibility: visible;"></div>
</div>

Every thing is in the same html page, i do it to learn more about Vue js first.

CodePudding user response：

Try with v-on:click or @click and save index in data property:

new Vue({
  el: '#demo',
  data() {
    return {
      items: [{"id": 1, "title": "Taylor Swift - Look What You Made Me Do", "description": "Get Taylor Swift’s new album, reputation, including “Look What You Made Me Do,” here: http://smarturl.it/reputationTS\n\nhttp://vevo.ly/MOlgkR", "artist": "YouTube Spotlight", "youtube": "3tmd-ClpJxA", "thumb": "https://i.ytimg.com/vi/3tmd-ClpJxA/mqdefault.jpg" },
          {"id": 2, "title": "Charlie Puth - Attention [Official Video]", "description": "Download and Stream \"Attention\": https://Atlantic.lnk.to/AttentionID\n\nPre-Order Voicenotes: https://Atlantic.lnk.to/VoicenotesID\n\nExclusive VoiceNotes Merchandise Bundles Available Here: http://smarturl.it/VoiceNotesD2CYT\n\nVideo Directed by Emil Nava\n\nWritten By: Charlie Puth and Jacob Kasher\nProduced By: Charlie Puth\nVocal Production: Charlie Puth\nInstruments: Korg Triton Studio, Juno 60, Omnisphere, Trillian for the Bass, Rhodes 77, Yamaha DX7, Pro Tools I2, Fender Stratocaster, Martin HD-28 Acoustic\nMixed By: Manny Marroquin & Charlie Puth at Larrabee Sound Studios\nRecorded At: Home Studio of Charlie Puth & Tour Bus of Charlie Puth\nMastered By: Dave Kutch at the Mastering Palace\n\nStore - http://smarturl.it/CPAttentionMerchYT\n\nFollow Charlie:\nhttp://www.charlieputh.com\nhttp://www.twitter.com/charlieputh\nhttp://www.facebook.com/charlieputh\nhttp://www.instagram.com/charlieputh", "artist": "YouTube Spotlight", "youtube": "nfs8NYg7yQM", "thumb": "https://i.ytimg.com/vi/nfs8NYg7yQM/mqdefault.jpg"}],
      indexhere: 0
    }
  },
  methods: {
    getSummary(idx) {
      this.indexhere = idx
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-cloak v-for="(item, index) in items" :key="item.id" v-on:click="getSummary(index)">
    <img v-bind:src="item.thumb" alt="">
  </div>

  <div id="summary-container" v-cloak >
    <div id="summaryTitle" >{{ items[indexhere].title }}</div>
    <div id="summaryDate" >{{ items[indexhere].description }}</div>
    <div id="summaryDesc" ></div>
    <div id="summary-buttons-container" style="visibility: visible;"></div>
  </div>
</div>