I'm seeking guidance as a newcomer to Vue, so please bear with me if my question appears simplistic.
My scenario involves a set of buttons and corresponding div elements. The goal is to show a specific div when its associated button is clicked, while hiding all others. Here's my current implementation:
<!-- 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>
Currently, the About box is visible by default, but I'm unsure how to proceed further. The showBox() method doesn't seem to work as expected with the variable I pass from the click event. Additionally, I'm unsure how to effectively hide the other boxes. Should I iterate through the objects and set all isHidden values to true?
Any assistance or suggestions would be greatly appreciated.