中秋節快樂~連假第二天還是要努力一下!

先附上要丟入x-data中的js資料

<script>
    function modal() {
        return {
            isOpen: false,
            faqs: [
                {
                    question: "question1",
                    answer: "answer1_aaaaa",
                    isOpen: true
                },
                {
                    question: "question2",
                    answer: "answer2_bbbbb",
                    isOpen: true
                },
                {
                    question: "question3",
                    answer: "answer3_ccccc",
                    isOpen: true
                },
            ]
        }
    }
</script>

將回傳的值拆開來看，
先預設isOpen: false，
接著faqs為一個陣列[]，裡面有三個物件，
是重複性的資料，等等會把它拿來做迴圈。

再來看看html

<div x-data="modal()">
    <template x-for="faq in faqs" :key="faq.question">
        <div>
            <button @click="faq.isOpen =! faq.isOpen">
                <div x-text="faq.question"></div>
            </button>

            <div x-show="faq.isOpen">
                <span>opening</span>
                <div x-text="faq.answer"></div>
            </div>
            <div x-show="!faq.isOpen">
                <span>closing</span>
            </div>
        </div>
    </template>
</div>

x-data="modal()"這裡取出剛剛function回傳的值，
接著寫上for迴圈，這樣資料有幾項，這裡就會跑幾次，
button控制各個項目的開關，
好處就是因為迴圈裡每個index都不同，
因此不會按第二個按鈕而第一個的東西被執行，
然後後面都是簡易的邏輯判斷和顯示，給大家參考參考