如何在Vue.js中实现组件切换？Dashboard父组件下子组件按需显示问题求助

我帮你找出了几个导致功能失效的关键问题，咱们一步步来修复：

问题分析 #

1. 大小写匹配错误：你的applyOption方法里判断evt.target.value === 'HightoLow'，但下拉选项的value是HighToLow（大小写不一致，T是大写），导致这个条件永远不成立。
2. 逻辑判断错误：当选择LowToHigh时，你设置flag=true，但根据模板的v-show规则，flag=true会显示DisplayBooks，而你需要显示的是sortBooksLowtoHigh，逻辑完全反了。
3. 状态变量设计不合理：单个flag只能控制两种状态，但你有三个场景（默认排序、价格从低到高、价格从高到低），用flag会导致sortBooksLowtoHigh和sortBooksHightoLow同时显示的问题。

修复方案 #

我们改用selectedSort变量来追踪当前选中的排序选项，这样能清晰区分三种状态：

修改后的完整代码

<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>
<!-- 给默认选项添加selected属性，确保初始选中状态 -->
<select class="options" @change="applyOption">
<option disabled value="" selected>Sort by relevance</option>
<option value="HighToLow">price:High to Low</option>
<option value="LowToHigh">price:Low to High</option>
</select>
</div>
<!-- 根据selectedSort的值控制组件显示 -->
<DisplayBooks v-show="selectedSort === ''" />
<sortBooksLowtoHigh v-show="selectedSort === 'LowToHigh'" />
<sortBooksHightoLow v-show="selectedSort === 'HighToLow'" />
</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 {
selectedSort: '', // 初始为空，对应默认排序选项
brand:'Bookstore',
}
},
methods:{
flip() {
this.selectedSort = ''; // 如果这个方法需要重置回默认状态，修改为设置空字符串
},
applyOption(evt) {
// 直接把选中的value赋值给selectedSort，无需复杂判断
this.selectedSort = evt.target.value;
},
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/Dashboard.scss";
</style>

关键修改点说明 #

• 状态变量替换：用selectedSort替代flag，每个排序选项对应唯一的字符串值，避免状态混淆。
• 组件显示逻辑优化：每个组件的v-show直接匹配对应的selectedSort值，逻辑清晰直观。
• 修正下拉默认选中：给默认选项添加selected属性，确保页面加载时默认选中“Sort by relevance”。
• 简化方法逻辑：applyOption方法直接赋值，去掉容易出错的条件判断。

这样修改后，你的组件切换功能就能正常工作了：

• 默认状态：显示DisplayBooks
• 选择“price:Low to High”：显示sortBooksLowtoHigh
• 选择“price:High to Low”：显示sortBooksHightoLow

内容的提问来源于stack exchange，提问作者Devops Training