按钮单击以显示匹配的 DIV 并隐藏其他，使用 Vue3

Question

如果问题看起来很愚蠢，我深表歉意。我是 Vue 新手。

我有几个按钮和几个 div。单击每个按钮时都应该显示匹配的 div，同时隐藏其他所有人。

这就是我所做的

<!-- Buttons -->
<div v-for="button in buttons" :key="button" @click="showBox(button.link)">
    {{ button.text }}
</div>

<!-- Boxes -->
<div id="about" :class="{ hidden: boxes.about.isHidden }">
    About me
</div>

<div id="resume" :class="{ hidden: boxes.resume.isHidden }">
    Resume
</div>

<div id="contact" :class="{ hidden: boxes.contact.isHidden }">
    Contact
</div>

<script>
    export default {
        components: {
        },
        props: {
        },
        data () {
            return {
                buttons: [
                    { text: 'About', link: 'about' }, 
                    { text: 'Resume', link: 'resume' },
                    { text: 'Contact', link: 'contact' },
                ],
                boxes: {
                    about: { isHidden: false },
                    resume: { isHidden: true },
                    contact: { isHidden: true },
                }
            }
        },
        methods: {
            showBox(box) {
                boxes.box.isHidden = false
            }
        }
    }
</script>

如您所见，默认情况下 About 框是可见的，但我不确定如何从这里继续。 当我放置从点击函数传递的变量（框）并像这样放置时，showBox() 方法不起作用。我也不确定如何最好地隐藏其余的盒子。我是否遍历对象并将所有 isHidden 设置为 true？

感谢任何帮助。

Answer 1

您可以使用this 关键字访问数据。 你需要用this.boxes[box].isHidden = false修复它