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

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>

应用程序:

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 数组的真正含义，您可能需要考虑在数据到达您的 View 之前对其进行过滤 (HTML)