CODEWITHSUNDEEP
javascriptvue.js
buzz eclair
buzz eclair

Reputation: 49

How to use a function in Vue.js instead of v-for to access data?

I need help to correctly use my data with Vue.js.

I have an array (named matches) with variables id, home_team, away_team and an array (named scorehome) with the pronostics of user.

I want to return a list of input where the placeholder stores the bet of the user or if he didn't bet, a placeholder with 0.

But for the moment I returned the first bet in the outside v-for loop, and the other one in another loop, etc

I want to have all my bets in the same div without the outer loop.

I don't know how to fix it !

If someone have an idea :)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
   
    <div id="home">
        <div v-for="value in scorehome" :key="scorehome" >
            
            <div v-for="matche in matches" :key="matche.id">  
                <input  v-if="matche.id === value.key_score" type="text" :placeholder="value.score">
                <input  v-else type="text" :placeholder="0">
            </div>
        </div>
    </div>
    <script>
    var vm = new Vue({
        el : '#home',
        data: {
            matches : [
               
                    {
                        "id" : 1,
                        "home_team" : "russia",
                        "away_team": "france"
                    },
                    {
                        "id" : 2,
                        "home_team" : "england",
                        "away_team": "france"
                    },
                    {
                        "id" : 3,
                        "home_team" : "china",
                        "away_team": "france"
                    },
                   {
                        "id" : 4,
                        "home_team" : "japan",
                        "away_team": "france"
                    }
                
            ],
            scorehome : [
                {
                    "key_score" : 1,
                    "score" : 2
                },
                {
                    "key_score" : 2,
                    "score" : 4
                }
            ]
        }
        
    })
    </script>
</body>
</html>

Upvotes: 1

Views: 376

Answers (1)

Sovalina
Sovalina

Reputation: 5609

You can use a method with match.id as parameter to find the score. Then return a conditional value if the score is found else 0: 

new Vue({
  el : '#home',
  data: {
    matches : [
      {
        "id" : 1,
        "home_team" : "russia",
        "away_team": "france"
      },
      {
        "id" : 2,
        "home_team" : "england",
        "away_team": "france"
      },
      {
        "id" : 3,
        "home_team" : "china",
        "away_team": "france"
      },
      {
        "id" : 4,
        "home_team" : "japan",
        "away_team": "france"
      }
    ],
    scorehome : [
      {
        "key_score" : 1,
        "score" : 2
      },
      {
        "key_score" : 2,
        "score" : 4
      }
    ]
  },
  methods: {
    findScore(id) {
      let score = this.scorehome.find(score => score.key_score == id)
      return score ? score.score : 0
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="home">
  <div v-for="match in matches" :key="match.id">
    <p>{{ match.home_team }} vs {{ match.away_team }}</p>
    Bet : <input type="text" :placeholder="findScore(match.id)">
  </div>
</div>

Upvotes: 1

Related Questions