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

Question

I apologize if question seems dumb. I'm new to Vue.

I have a couple of buttons and a couple of divs. Each button when clicked is supposed to display the matching div while hiding everyone else.

This is what I've done

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

As you can see, per default the About -box is visible, but I'm not sure how to continue from here. The showBox() method doesn't work when I put the varible (box) I passed from the click-function and place it like that. I'm also not sure how I best hide the rest of the boxes. Do I loop through the objects and set all isHidden to true?

Appreciate any help.

Answer 1

You can access data with the this keyword. You need to fixed it with this.boxes[box].isHidden = false