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

1 Answer
1

That's because you are always setting flag to true. Try to invert the boolean value.

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

Edit: This is one way but not the best way. I will update my answer.

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;
}
}
}
}
});

Edit 2: This is a better way to do it. I am using indexToShow, this variable will have the index of the faq that will be shown. So, you have to check if they match v-show="index===indexToShow". If indexToShow is -1 , it will not show any answer.

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;
}
}
});