Question

我只需要在v-for循环内打印一位获胜者。但是我不知道该怎么做？

<div id="app">
   <div v-for="user in users">
       <div v-if="user.is_winner == 'winner'">
         <p>{{user.name}}</p>
       </div>
   </div>
</div>

app：

new Vue({
    el: '#app',
    data: {
        users: [{
            "name": "Mike",
            "is_winner": "winner"
        }, {
            "name": "Piter",
            "is_winner": "fail"
        }, {
            "name": "Jow",
            "is_winner": "fail"
        }, {
            "name": "John",
            "is_winner": "winner"
        }]
    }
})

我只需要打印一位获奖者。名称无所谓。

https://jsfiddle.net/w3f4u2ag/1/

Answer 1

users数组中的数据格式不正确。您可以使用以下内容仅打印第一个获胜者：

<div id="app">
  <p> {{users.find(u => u.is_winner == 'winner').name}}</p>
</div>

基本上完全避免了v-for循环。但是，根据应用程序的目标和users数组的真实含义，您可能需要考虑在数据到达视图（HTML）之前对其进行过滤

Answer 2

您可以使用computed property：

new Vue({
  el: '#app',
  data: {
    users: [	
    {
      "name": "Mike",
      "is_winner": "winner"
    }, 
    {
      "name": "Piter",
      "is_winner": "fail"
    }, 
    {
      "name": "Jow",
      "is_winner": "fail"
    }, 
    {
      "name": "John",
      "is_winner": "winner"
		}]
  },
  computed: {
    firstWinner () {
      return this.users.find(user => user.is_winner === "winner")
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
   <p>{{firstWinner.name}}</p>
</div>

如果您使用的是Vue应用程序，那么这似乎最适合您的用例。仅当与计算相关的数据更改时，才会处理该计算的属性。

如果没有获胜者，您还可以避免错误，并使用以下方式更新HTML：

   <p v-if="firstWinner !== undefined">{{firstWinner.name}}</p>

fiddle here。

如何在v-for循环中仅打印第一个获胜者？

2 个答案: