Блог

Я приношу извинения, если вопрос кажется глупым. Я новичок в Vue.

У меня есть пара кнопок и пара дивов. Каждая кнопка при нажатии должна отображать соответствующий 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>
 

Как вы можете видеть, по умолчанию поле «О программе» отображается, но я не уверен, как продолжить отсюда.
Метод showBox() не работает, когда я помещаю переменную (поле) Я перешел от функции щелчка и разместил ее так. Я также не уверен, как мне лучше всего спрятать остальные коробки. Должен ли я перебирать объекты и устанавливать для всех isHidden значение true?

Буду признателен за любую помощь.

Вы можете получить доступ к данным с this помощью ключевого слова. Вам нужно исправить это с помощью this.boxes[box].isHidden = false