[Vuejs]-Getting two values of an array of object displaying one versus the other on vue js

by

0👍

✅

If I understood your question correctly, in my opinion the best way is to first work on the array a little.

Maybe grouping the players 2by2 and then loop that array instead. To do this you can use array.reduce. 

new Vue({
  el: '#app',
  
  data: {
    players: [
      {
        "id": 1,
        "player": {
          "id": 1,
          "player": "Jack Bauer",
          "email": "j.bauer@ctu.gov2",
          "password": "24"
         }
      },
      {
        "id": 2,
        "player": {
          "id": 2,
          "player": "Chloe O'Brian",
          "email": "c.obrian@ctu.gov",
          "password": "42"
        }
      }
    ]
  },
  
  computed: {
    matches () {
      return this.players.reduce((matches, item, index, arr) => {
        if (index !== arr.length - 1) {
          matches.push({player: item, opponent: arr[index + 1]})
        }
      
        return matches
      }, []);
    }
  }
})
<div id="app">
  <h3>Matches</h3>
  <div v-for="(match, index) in matches" :key="index">
    <div>
      {{ match.player.player.player }} <strong>vs</strong> {{ match.opponent.player.player }}       </div>        
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

Leave a comment