In my project, I created a Dashboard.vue page that consists of three child components: Display, sortBooksLowtoHigh, and sortBooksHightoLow. The Dashboard component also includes a select option with two choices: "Price: High to Low" and "Price: Low to High." When the user selects "Price: Low to High," it hides the Display component and shows the sortBooksLowtoHigh component.
Now, I have added another component called sortBooksHightoLow. When the user selects "Price: High to Low," it should hide the Display component and display the sortBooksHightoLow component. How can I achieve this? Please provide guidance.
Dashboard.vue
<template>
<div class="main">
<div class="navbar navbar-default navbar-fixed-top">
...
</div>
...
<DisplayBooks v-show="flag==='noOrder'" />
<sortBooksLowtoHigh v-show="flag==='lowToHigh'" />
<sortBooksHightoLow v-show="flag==='highToLow'" />
</div>
</template>
<script>
import service from '../service/User'
...
</script>
<style lang="scss" scoped>
@import "@/styles/Dashboard.scss";
</style>
sortBooksHightoLow.vue
<template>
<div class="carddisplay-section">
...
</div>
</template>
<script>
import service from '../service/User'
...
</script>
<style lang="scss" scoped>
@import "@/styles/DisplayBooks.scss";
</style>
sortBooksLowtoHigh.vue
<template>
<div class="carddisplay-section">
...
</div>
</template>
<script>
import service from '../service/User'
...
</script>
<style lang="scss" scoped>
@import "@/styles/DisplayBooks.scss";
</style>