<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
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>