Блог

Мне нужно напечатать только одного победителя внутри 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/

Данные внутри users массива неправильно отформатированы. Вы можете использовать следующее, чтобы распечатать только первого победителя:

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

по сути v-for , полностью избегая цикла. Однако, в зависимости от цели вашего приложения и истинного значения users массива, вы можете рассмотреть возможность фильтрации данных до того, как они попадут в ваше представление (HTML)

Вы могли бы использовать вычисляемое свойство:

 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>
 

скрипка здесь.