Блог

Я разрабатываю три компонента Dashboard.vue(родительский компонент), который содержит два дочерних компонента, таких как DisplayBooks.vue и sortBooksLowtoHigh.vue .в компоненте панели мониторинга он будет содержать некоторые параметры[сортировка по релевантности] по умолчанию компонент sortBooksLowToHigh не должен быть видимым, а компонент displayBooks должен быть виден по умолчанию, когда я нажимаю на опцию цена:низкая высота компонент DisplayBooks должен быть скрыт, а компонент sortBooksLowtoHigh должен быть виден.Как достичь этого, пожалуйста, помогите мне решить эту проблему.

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>


 

Показывать книги отображения, когда флаг имеет значение true, и наоборот для sortBooksLowtoHigh

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

и

 <DisplayBooks v-show="flag" />
<sortBooksLowtoHigh v-show="!flag" /> 
 

а потом в

 data() {
        return {
            flag:true,
            brand:'Bookstore',
        }
    },
methods:{
        applyOption(evt) {
            if(evt.target.value === "HightoLow") this.flag = true;
            else this.flag = false;
        },
    }
 

Обратите внимание, что его методы, а не метод

Редактировать:

Если вы собираетесь импортировать новый компонент «sortBookHightoLow.vue», поэтому, исходя из ваших требований, вы можете вместо установки логического значения для флага задать для него текст. Пожалуйста, проверьте код ниже

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

и

 <DisplayBooks v-show="flag==='noOrder'" />
<sortBooksLowtoHigh v-show="flag==='lowToHigh'" /> 
<sortBooksHightoLow v-show="flag==='highToLow'" /> 
 

а потом в

 data() {
        return {
            flag:'noOrder',
            brand:'Bookstore',
        }
    },
methods:{
        applyOption(evt) {
            if(evt.target.value === "HightoLow") this.flag = 'highToLow';
            else this.flag ='lowToHigh';
        },
    }