How to not display certain array elements?

Question

JavaScript

There is a list of sports leagues, I have to display the picture of the league and the name of the league, but there are pictures not for every league. How to display only those leagues in which the image address is not null or an empty string?
The code of the component where the list of leagues is displayed:

<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

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

Second option:

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