Javascript 切换数组按钮

Question

我的网站中有一个常见问题解答部分，但它仅在您单击按钮时打开。我想在您点击时打开和关闭。

常见问题解答的所有信息都存在于 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。尝试反转 bool 值。

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>