Javascript切换数组按钮

Question

我在网站上有一个“常见问题解答”部分，但只有在您单击该按钮时才会打开。 当您单击时，我想打开和关闭。

FAQ中的所有信息都存在于Javascript中，并且全部通过v-for函数进行调用。

我在下面插入我的代码，希望您能对我有所帮助。

HTML：

<div class="section10">
            <div class="content-container qa-content-container">
                <h2>Frequently asked questions,
                    <br> answered.
                </h2>

                <div class="column">
                    <div class="qanda-div w-col" v-for="(faqs, index) in faq" :key="faqs.questions">
                        <button class="qa-toggle-button w-button" @click="toggle(index)">

                            {{faqs.questions}}
                        </button>
                        <p class="qa-answer" style="none" v-show="faqs.flag">
                            {{faqs.answers}}
                        </p>
                    </div>
                </div>

                <p class="grey qa-moreQ">
                    Got more questions? Ask us
                    <a href="mailto:contact@web.co" class="green">here.</a>
                </p>
            </div>
        </div>

使用Javascript：

<script>
export default {
    layout: 'noFooter',

    data(){
        return {
            faq: [
                {
                    questions: 'Seriously, free?',
                    answers: "Yes; as an Organiser you don't pay any setup, monthly or annual fees. With Ticketpass you'll recieve 100% of your ticket sales. We organise events too and know how much time and effort you put into them. You shouldn't be paying fees after all that!",
                    flag: false
                },

                {
                    questions: 'How do tickets work?',
                    answers: "When someone registers for your event or purchases a ticket, we'll send them an email with your event details, a booking reference, and a unique QR code. You will be able to check them in online at the event entrance, or if you are old school, you can download and print a beautiful sheet with your attendees' name and the ticket type they bought. Simple!",
                    flag: false
                },

                {
                    questions: 'How do I collect my money?',
                    answers: "As soon as your event ends, we'll process your payment and arrange for it to be transferred to your account. We understand that in some cases you may need to access your sales revenue before the event in order to cover costs, in which case you can apply for early payment by verifying your identity. Note that depending on your bank it can take a few working days for payments to show in your account.",
                    flag: false
                },

                {
                    questions: "If it's free, how can you afford coffee?",
                    answers: "Ticketpass is completely free for organisers, our costs are covered on card payments when attendees purchase tickets.",
                    flag: false
                },

                {
                    questions: 'Do I need to pay any processing fees?',
                    answers: "Nope, we'll take care of them. - Happy days! :)",
                    flag: false
                },

                {
                    questions: 'Can I see an attendees list for my event?',
                    answers: "Yes - you can view and download an attendee list from your event dashboard, where you can also track registrations and keep an eye on ticket sales 24/7.",
                    flag: false
                },

                {
                    questions: 'Can I offer a discount to selected people?',
                    answers: "Yes, you can!  And it's very simple. When creatng your event tickets, in 'advanced settings' you can generate a discount code to share with whoever you like!",
                    flag: false
                },

                {
                    questions: 'Will I be able to message my attendees?',
                    answers: "Yes. If you need to communicate any information or updates you can do so easily through your dashboard.",
                    flag: false
                },

                {
                    questions: 'Can I run private events?',
                    answers: "Absolutely! When you create your event just select 'private' and your event will be hidden from the homepage and search function. You will still have your unique event URL to share it with only the people you want!",
                    flag: false
                },

                {
                    questions: 'What if I have a recurring event?',
                    answers: "Cry... with happiness! Because with one-click you can duplicate your event or enable automatic recurrence ;)",
                    flag: false
                }
            ],
        }
    },

    methods:{
        toggle: function(index){
            for(var i = 0; i < this.faq.length; i++){
                this.faq[i].flag = false;
            }
            this.faq[index].flag = true;
        }
    }
}
</script>

非常感谢！

Answer 1

那是因为您总是将flag设置为true 。 尝试反转布尔值。

this.faq[index].flag = !this.faq[index].flag;

编辑：这是一种方法，但不是最佳方法。 我将更新我的答案。

 var example1 = new Vue({ el: '#example', data() { return { faq: [{ questions: 'Seriously, free?', answers: "Yes; as an Organiser you don't pay any setup, monthly or annual fees. With Ticketpass you'll recieve 100% of your ticket sales. We organise events too and know how much time and effort you put into them. You shouldn't be paying fees after all that!", flag: false }, { questions: 'How do tickets work?', answers: "When someone registers for your event or purchases a ticket, we'll send them an email with your event details, a booking reference, and a unique QR code. You will be able to check them in online at the event entrance, or if you are old school, you can download and print a beautiful sheet with your attendees' name and the ticket type they bought. Simple!", flag: false }, { questions: 'How do I collect my money?', answers: "As soon as your event ends, we'll process your payment and arrange for it to be transferred to your account. We understand that in some cases you may need to access your sales revenue before the event in order to cover costs, in which case you can apply for early payment by verifying your identity. Note that depending on your bank it can take a few working days for payments to show in your account.", flag: false }, { questions: "If it's free, how can you afford coffee?", answers: "Ticketpass is completely free for organisers, our costs are covered on card payments when attendees purchase tickets.", flag: false }, { questions: 'Do I need to pay any processing fees?', answers: "Nope, we'll take care of them. - Happy days! :)", flag: false }, { questions: 'Can I see an attendees list for my event?', answers: "Yes - you can view and download an attendee list from your event dashboard, where you can also track registrations and keep an eye on ticket sales 24/7.", flag: false }, { questions: 'Can I offer a discount to selected people?', answers: "Yes, you can! And it's very simple. When creatng your event tickets, in 'advanced settings' you can generate a discount code to share with whoever you like!", flag: false }, { questions: 'Will I be able to message my attendees?', answers: "Yes. If you need to communicate any information or updates you can do so easily through your dashboard.", flag: false }, { questions: 'Can I run private events?', answers: "Absolutely! When you create your event just select 'private' and your event will be hidden from the homepage and search function. You will still have your unique event URL to share it with only the people you want!", flag: false }, { questions: 'What if I have a recurring event?', answers: "Cry... with happiness! Because with one-click you can duplicate your event or enable automatic recurrence ;)", flag: false } ], } }, methods: { toggle: function(index) { for (var i = 0; i < this.faq.length; i++) { if (this.faq[index] === this.faq[i]) { this.faq[index].flag = !this.faq[index].flag; } else { this.faq[i].flag = false; } } } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div class="section10" id="example"> <div class="content-container qa-content-container"> <h2>Frequently asked questions, <br> answered. </h2> <div class="column"> <div class="qanda-div w-col" v-for="(faqs, index) in faq" :key="faqs.questions"> <button class="qa-toggle-button w-button" @click="toggle(index)"> {{faqs.questions}} </button> <p class="qa-answer" style="none" v-show="faqs.flag"> {{faqs.answers}} </p> </div> </div> <p class="grey qa-moreQ"> Got more questions? Ask us <a href="mailto:contact@ticketpass.co" class="green">here.</a> </p> </div> </div> 

编辑2：这是一种更好的方法。 我正在使用indexToShow ，此变量将具有将显示的faq的索引。 因此，您必须检查它们是否与v-show="index===indexToShow"匹配。 如果indexToShow为-1 ，则不会显示任何答案。

 var example1 = new Vue({ el: '#example', data() { return { indexToShow: -1, faq: [{ questions: 'Seriously, free?', answers: "Yes; as an Organiser you don't pay any setup, monthly or annual fees. With Ticketpass you'll recieve 100% of your ticket sales. We organise events too and know how much time and effort you put into them. You shouldn't be paying fees after all that!", flag: false }, { questions: 'How do tickets work?', answers: "When someone registers for your event or purchases a ticket, we'll send them an email with your event details, a booking reference, and a unique QR code. You will be able to check them in online at the event entrance, or if you are old school, you can download and print a beautiful sheet with your attendees' name and the ticket type they bought. Simple!", flag: false }, { questions: 'How do I collect my money?', answers: "As soon as your event ends, we'll process your payment and arrange for it to be transferred to your account. We understand that in some cases you may need to access your sales revenue before the event in order to cover costs, in which case you can apply for early payment by verifying your identity. Note that depending on your bank it can take a few working days for payments to show in your account.", flag: false }, { questions: "If it's free, how can you afford coffee?", answers: "Ticketpass is completely free for organisers, our costs are covered on card payments when attendees purchase tickets.", flag: false }, { questions: 'Do I need to pay any processing fees?', answers: "Nope, we'll take care of them. - Happy days! :)", flag: false }, { questions: 'Can I see an attendees list for my event?', answers: "Yes - you can view and download an attendee list from your event dashboard, where you can also track registrations and keep an eye on ticket sales 24/7.", flag: false }, { questions: 'Can I offer a discount to selected people?', answers: "Yes, you can! And it's very simple. When creatng your event tickets, in 'advanced settings' you can generate a discount code to share with whoever you like!", flag: false }, { questions: 'Will I be able to message my attendees?', answers: "Yes. If you need to communicate any information or updates you can do so easily through your dashboard.", flag: false }, { questions: 'Can I run private events?', answers: "Absolutely! When you create your event just select 'private' and your event will be hidden from the homepage and search function. You will still have your unique event URL to share it with only the people you want!", flag: false }, { questions: 'What if I have a recurring event?', answers: "Cry... with happiness! Because with one-click you can duplicate your event or enable automatic recurrence ;)", flag: false } ], } }, methods: { toggle: function(index) { this.indexToShow = (this.indexToShow === index)? -1 : index; } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div class="section10" id="example"> <div class="content-container qa-content-container"> <h2>Frequently asked questions, <br> answered. </h2> <div class="column"> <div class="qanda-div w-col" v-for="(faqs, index) in faq" :key="faqs.questions"> <button class="qa-toggle-button w-button" @click="toggle(index)"> {{faqs.questions}} </button> <p class="qa-answer" style="none" v-show="index===indexToShow"> {{faqs.answers}} </p> </div> </div> <p class="grey qa-moreQ"> Got more questions? Ask us <a href="mailto:contact@ticketpass.co" class="green">here.</a> </p> </div> </div>