如何在 Vue.js 中使用函数而不是 v-for 来访问数据？答案

【问题标题】：How to use a function in Vue.js instead of v-for to access data?如何在 Vue.js 中使用函数而不是 v-for 来访问数据？
【发布时间】：2018-11-29 21:32:10
【问题描述】：

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

我有一个包含变量 id、home_team、away_team 的数组（命名为匹配项）和一个包含用户预测的数组（命名为 scorehome）。

我想返回一个输入列表，其中占位符存储用户的赌注，或者如果他没有下注，则返回一个 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>

【问题讨论】：

使用一个计算属性来计算this.scorehome*this.matches 的结果，然后在模板中只对那个计算属性使用一个循环。

标签： javascript vue.js

【解决方案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>

【讨论】：