Vue3实现点击按钮显示对应DIV并隐藏其余元素的问题求助

问题点说明 #

• 动态属性访问逻辑错误：boxes.box.isHidden写法是读取boxes下固定名为box的属性，无法匹配你传入的动态变量，同时Vue实例中访问data内的属性需要加this前缀。
• 缺少其余元素的隐藏逻辑：需要先将所有DIV的隐藏状态设为true，再将目标DIV设为显示。

原逻辑修复方案 #

仅修改showBox方法即可让现有代码正常运行：

methods: {
    showBox(box) {
        // 遍历所有box，统一设为隐藏
        Object.keys(this.boxes).forEach(boxKey => {
            this.boxes[boxKey].isHidden = true
        })
        // 用方括号语法访问动态属性，将目标box设为显示
        this.boxes[box].isHidden = false
    }
}

更简洁的优化方案 #

你可以简化状态管理，不需要为每个DIV单独维护isHidden属性，仅存储当前激活的DIV标识即可：

1. 修改data结构

data () {
    return {
        buttons: [
            { text: 'About', link: 'about' }, 
            { text: 'Resume', link: 'resume' },
            { text: 'Contact', link: 'contact' },
        ],
        // 存储当前激活的DIV标识，默认展示about
        activeLink: 'about'
    }
}

2. 修改showBox方法

methods: {
    showBox(link) {
        this.activeLink = link
    }
}

3. 修改模板中DIV的类绑定逻辑

<div id="about" :class="{ hidden: activeLink !== 'about' }">
    About me
</div>
<div id="resume" :class="{ hidden: activeLink !== 'resume' }">
    Resume
</div>
<div id="contact" :class="{ hidden: activeLink !== 'contact' }">
    Contact
</div>

该方案减少了冗余状态，维护成本更低。

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