Как не отображать определенные элементы массива?

Question

[Иван Иванов]

Есть список лиг спорта, я должен отобразить картинку лиги и название лиги, но картинки есть не для каждой лиги. Как отображать только те лиги, в которых адрес картинки не равен null или пустой строке?

Код компонента, где отображается список лиг:

<template>
  <div id="detailSport">
      <div v-for="(league, index) in leagues.countrys">
          <h3>{{ league.strLeague }}</h3>
          <h5>{{ league.strFanart1 }}</h5>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'app',
  props: {
   sportStr: String
  },
  created(){
    this.$store.dispatch("loadLeagues", this.sportStr);
  },
  computed: {
    leagues() {
      return this.$store.state.leagues;
    }
  },
}
</script>

Store:

export default new vuex.Store({
  state: {
    leagues: []
  },
  mutations: {
    SET_LEAGUES(state, leagues) {
      state.leagues = leagues
    }
  },
  actions: {
    loadLeagues ({commit}, sport) {
      axios.get(`https://www.thesportsdb.com/api/v1/json/1/search_all_leagues.php?s=${sport}`).then(response => {
        let leagues = response.data
        commit('SET_LEAGUES', leagues)
      }).catch(error => {
        console.log(error);
      })
    }
  }
})

Answer 1

[Сергей delphinpro]

<div v-for="(league, index) in leagues.countrys"
     v-if="league.strFanart1"
>
    <h3>{{ league.strLeague }}</h3>
    <h5>{{ league.strFanart1 }}</h5>
</div>

Второй вариант:

computed: {
    leagues() {
      return this.$store.state.leagues.filter(item => !!item.strFanart1);
    }
},

Comments

[Иван Иванов]

Спасибо

[Полина]

Документация не рекомендует использование v-if и v-for на одном элементе (хотя и не запрещает), поэтому в первом случае корректнее сделать так:

<div v-for="(league, index) in leagues.countrys">
    <div v-if="league.strFanart1">
        <h3>{{ league.strLeague }}</h3>
        <h5>{{ league.strFanart1 }}</h5>
    </div>
</div>

[Сергей delphinpro]

Полина, Вовсе нет. В данном случае вы слепо следуете рекомендациям, но и мой вариант и ваш исправленный одинаковы, как в плане оптимизации, так и в плане "чистоты". Если знать о приоритетах директив, то не важно где располагать v-if. В любом случае проверки будут выполняться на каждой итерации цикла.
Другое дело — вычисляемое поле. Массив один раз фильтруется и будет меняться только при изменении массива с лигами.