PC-official/static/js/guess.js

const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
const search = createApp({
    setup() {
        const musicData = ref([
            ["A组 世界在转动.MP3", "A组《来吧，占领我的无私》"],
            ["B组 《远方》.MP3", "B组 大闹天宫.MP3", "B组 下一站旅行.MP3"],
            ["C组 旧唱片.MP3", "C组 梅雨季.MP3", "C组 尊重成长共赢.MP3", "C组《弥留》.MP3"],
        ]);

        let step = ref(0); // null 是未开始 0 是第一题

        onMounted(() => {
            console.log("init");
            init();
        });

        const init = () => {
            // 将 musicData 里的 二维值打乱
            musicData.value.forEach((item) => {
                item.sort(() => Math.random() - 0.5);
            });

            console.log(musicData.value);
        };

        const begin = () => {
            step.value = 0;
        };

        // 添加一个方法来切换到下一题
        const nextStep = () => {
            if (step.value < musicData.value.length - 1) {
                step.value++;
            } else {
                // 所有问题都回答完毕，可以重置或显示结果
                // step.value = null;
            }
        };

        const play = (item) => {
            console.log("item", item);
        };

        return { play, step, begin, musicData, nextStep };
    },
}).mount("#guess");