如何在vue.js中的组件之间切换？

toiithl6 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(357)

我开发了三个组件dashboard.vue（父组件），其中包含两个子组件，如displaybooks.vue和sortbookslowtohigh.vue。在dashboard组件中，它将包含一些选项[按相关性排序]，默认情况下sortbookslowtohigh组件不应可见，而displaybooks组件应默认可见，当我点击price:lowtohig选项时，displaybooks组件应该是隐藏的，SortBooksLowtohig组件应该是可见的。如何实现这一点，请帮助我解决这个问题。 Dashboard.vue ```

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

vue.js JavaScript vuejs2

来源：https://stackoverflow.com/questions/68316609/how-to-toggle-between-the-components-in-vue-js

1条答案

按热度按时间

lg40wkob1#

当标志为true时显示displaybooks，对于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';
        },
    }

赞(0）回复(0）举报 2021-09-23

我来回答

如何在vue.js中的组件之间切换？

1条答案

相关问题

热门标签

最新问答