I have created a Dashboard.vue component consisting of two child components: DisplayBooks.vue and sortBooksLowtoHigh.vue. Initially, the sortBooksLowToHigh component is hidden while the displayBooks component is visible by default. The requirement is that when the user clicks on the option to sort books by price Low to High, the DisplayBooks component should be hidden and the sortBooksLowtoHigh component should become visible. Can someone please assist me in resolving this issue?
Dashboard.vue
<template>
<div class="main">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="../assets/education.png" alt="notFound" class="education-image" />
</div>
<ul class="nav navbar-nav">
<li>
<p class="brand">Bookstore</p>
</li>
</ul>
<div class="input-group">
<i class="fas fa-search"></i>
<div class="form-outline">
<input type="search" class="form-control" placeholder='search...' />
</div>
</div>
<ul class="nav navbar-nav navbar-right" id="right-bar">
<li><a> <i class="far fa-user"></i></a></li>
<p class="profile-content">profile</p>
<li><a><i class="fas fa-cart-plus"></i></a></li>
<p class="cart-content">cart</p>
</ul>
</div>
<div class="mid-body">
<h6 >Books<span class="items">(128items)</span></h6>
<select class="options" @change="applyOption">
<option disabled value="">Sort by relevance</option>
<option value="HighToLow">price:High to Low</option>
<option value="LowToHigh">price:Low to High</option>
</select>
</div>
<DisplayBooks v-show="flag" />
<sortBooksLowtoHigh v-show="!flag" />
<sortBooksHightoLow v-show="!flag" />
</div>
</template>
<script>
import sortBooksLowtoHigh from './sortBooksLowtoHigh.vue'
import sortBooksHightoLow from './sortBooksHightoLow.vue'
import DisplayBooks from './DisplayBooks.vue'
export default {
components: {
DisplayBooks,sortBooksLowtoHigh,sortBooksHightoLow
},
data() {
return {
flag:true,
brand:'Bookstore',
}
},
methods:{
flip() {
this.flag = !this.flag;
},
applyOption(evt) {
if(evt.target.value === 'HightoLow') this.flag = true;
if(evt.target.value==='LowtoHigh') this.flag=true;
else this.flag = false;
},
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/Dashboard.scss";
</style>