CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
John Mcs
John Mcs

Reputation: 33

Vue - v-if no item with that name in the list then show an image

<ul class="ulItems" v-for="item in listingItems" :key="item.channels">
  <li class="liItems">
    {{ item.itemName }}
  </li>
</ul>

I want to display an image in cases where the list does not contain an object with that name

Upvotes: 2

Views: 110

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

If I understood you correctly, try like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      listingItems: [{itemName: 'aaa', channels: 1}, {itemName: '', channels: 2}, {itemName: 'bbb', channels: 3}],
      noNameImg: 'https://picsum.photos/50'
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul class="ulItems" v-for="item in listingItems" :key="item.channels">
    <li class="liItems" v-if="item.itemName">
      {{ item.itemName }}
    </li>
    <li class="liItems" v-else>
      <img :src="noNameImg" />
    </li>
  </ul>
</div>

Upvotes: 4

Related Questions