代码之家 › 专栏 › 技术社区 › Dmitry Bubnenkov

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

vue.js

Dmitry Bubnenkov · 技术社区 · 5 年前

我只需要在 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/

2 回复 | 直到 5 年前

dimlucas 5 年前

里面的数据 users

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

本质上避免 v-for 用户 数组,您可能需要考虑在数据到达视图之前对其进行筛选(HTML)

Ulysse BN 5 年前

你可以用一个 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>

如果没有赢家,也可以避免出现错误,使用以下内容更新HTML:

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

fiddle here

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前