Is there a way to exclude the value "Three" from the loop in the following code snippet?
<script >
const routes = [
{name: 'One', value: 24},
{name: 'Two', value: 25},
{name: 'Three', value: 26},
{name: 'Four', value: 34},
]
export default {
name: 'App',
computed: {
routes(){
return routes;
}
},
}
</script>
<template>
<div id="app">
<div class="movies">
<h2>Which movie?</h2>
<ul>
<li v-for="(route in routes" >
<span v-if="route.name !== 'Three'">{{ route.name }}</span>
</li>
</ul>
</div>
</div>
</template>
<style scoped>
</style>
The displayed output of the above code is like this:
https://i.sstatic.net/GClp6.png
An empty "li" tag is added when the condition is not met.
If I modify the structure by placing the v-if within the v-for as shown below:
<template>
<div id="app">
<div class="movies">
<h2>Which movie?</h2>
<ul>
<li v-for="(route in routes" v-if="route.name !== 'Three'">
<span>{{ route.name }}</span>
</li>
</ul>
</div>
</div>
</template>
I encounter an error message like:
https://i.sstatic.net/WIn3e.png
Any suggestions on how to resolve this issue would be greatly appreciated!