Question

我需要帮助才能在Vue.js中正确使用我的数据。

我有一个变量ID，home_team，away_team和一个数组（命名为Scorehome）的数组（命名为Matchs），该数组具有用户的代名词。

我想返回一个输入列表，在该列表中占位符存储用户的下注，或者如果用户未下注，则返回占位符0。

但是目前，我在外部v-for循环中返回了第一个下注，在另一个循环中返回了另一个，依此类推

我希望所有投注都在同一个div中，而没有外部循环。

我不知道如何解决！

如果有人有主意：）

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

Answer 1

您可以使用以match.id作为参数的方法来查找分数。如果找到分数，则返回条件值，否则返回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>

如何在Vue.js中使用函数代替v-for访问数据？

1 个答案: