一个@click事件，具有多个切换

Question

I have one element. I would like to add 3 different toggles with one @click:

1. toggle hidden nested <p>

2. toggle <i> element

3. toggle background color of parent box (.faq-box)

What is the best way to do this in vue.js?

I have deleted some data objects etc, just left behind what is applicable on the desired element.

This is the HTML element:

<div v-for="item in faqItems" v-bind:class="[isActive ? 'faq-box-white' : 'faq-box-warmgrey']" class="box faq-box is-shadowless has-py-3" @click="toggleFaq($event)">
        <div class="columns is-mobile">
            <div class="column">
                <li class="">
                 <span class="is-size-7-mobile has-text-weight-semibold collapse">
                                            {{ item.question }}
                </span>
                <p class="is-size-7 has-text-weight-normal is-hidden has-pt-4" v-html="item.answer">
                </p>
                </li>
            </div>
            <div class="column is-1 has-p-1">
                <i class="fa fa-caret-down is-pulled-right has-pt-3"></i>
            </div>
        </div>
    </div>

new Vue({
    el: '#appName',
    data: {
        isActive: true,
        },
    methods: {
        toggleFaq: function(event) {

            let el = event.target.parentNode.children[1];
            console.log(el);

            // console.log(document.querySelector("i").classList);
            let el_icon = document.querySelector("i").classList;
            console.log(el_icon);
                // el_icon.classList.toggle("fa-caret-up");
                // el_icon.classList.toggle("fa-caret-down");

            if(el.classList.contains('is-hidden')){
                el.classList.remove('is-hidden')
            } else {
                el.classList.add('is-hidden')
            }

            el = event.target.parentNode.children[0];
            if(el.classList.contains('collapse')){
                el.classList.remove('collapse')
            } else {
                el.classList.add('collapse')
            }

            //toggle background color
            if(this.isActive){
                this.isActive = false;
            }else{
                this.isActive = true;
            }

        },

Answer 1

As stated by @RoyJ, you need an active state for each FAQ. You can achieve this by adding a boolean flag to the FAQ box items.

 new Vue({ el: '#app', data() { return { items: [{ question: 'Question 1', answer: 'Answer 1', active: false }, { question: 'Question 2', answer: 'Answer 2', active: false }, { question: 'Question 3', answer: 'Answer 3', active: false }, { question: 'Question 4', answer: 'Answer 4', active: false } ] } } }) 

 .faq-box { background-color: rgba(128, 222, 234, 1); width: 200px; } .faq-box.active { background-color: rgba(197, 225, 165, 1); } ul { list-style-type: none; display: flex; flex-direction: row; } li { display: flex; flex-direction: row; justify-content: space-between; padding: 1rem; border-bottom: 1px solid black; } li:last-child { border: none; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <li v-for="item in items" :class="{ faqBox: true, active: item.active }" class="box faq-box is-shadowless has-py-3" @click="item.active = !item.active"> <div> <span>{{ item.question }}</span> <p v-show="item.active" v-html="item.answer"></p> </div> <i :class="{ fa: true, 'fa-caret-down': item.active, 'fa-caret-up': !item.active }"></i> </li> </div>