JavaScript全局变量activeMap无法更新问题（Vue/Nuxt场景）

核心问题在于DOM元素获取时机错误以及冗余条件判断导致activeMap从未被赋值：

• MAP_DIVS = document.getElementsByClassName("map")在setup执行时调用，此时组件DOM尚未挂载，返回的HTMLCollection为空集合，MAP_DIVS[0]、MAP_DIVS[1]、MAP_DIVS[2]均为undefined；
• toggleMap内的条件判断依赖MAP_DIVS的元素ID，但这些元素不存在，所有条件都不成立，activeMap始终保持初始值null。

解决步骤 #

1. 延迟DOM元素获取到onMounted钩子，确保组件DOM渲染完成后再获取；
2. 简化toggleMap逻辑：按钮点击时已传入目标地图的ID，直接赋值给activeMap即可，无需额外对比；
3. 可选：用ref声明activeMap，若后续需要在模板中使用该变量的响应式状态。

修改后的完整代码 #

<template>
    <div>
        <v-row class="pa-5">
            <v-col cols="12">
                <v-card outlined class="menu">
                    <div class="pa-3" style="text-align: center">
                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('incomes')"
                        >
                            <span class="buttonText">Incomes</span></v-btn
                        >

                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('home_values')"
                            ><span class="buttonText">House Prices</span></v-btn
                        >

                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('combined')"
                            ><span class="buttonText"> Market Health </span></v-btn
                        >
                    </div>
                </v-card>
            </v-col>
            <v-col style="text-align: center" id="d3-map" cols="0">
                <v-container class="container" id="map-container">
                    <v-col id="incomes" class="map"></v-col>
                    <v-col id="home_values" class="map"></v-col>
                    <v-col id="combined" class="map"></v-col>
                </v-container>
            </v-col>
        </v-row>
    </div>
</template>
<script>
import {
    defineComponent,
    onMounted,
    ref // 可选，需响应式时引入
} from "@nuxtjs/composition-api";

export default defineComponent({
    name: "Map",
    components: {},
    setup() {
        // 用ref声明实现响应式，无需响应式可替换为let activeMap = null;
        const activeMap = ref(null);
        let MAP_DIVS; // 先声明变量，onMounted中赋值

        onMounted(() => {
            // DOM挂载完成后获取元素，用querySelectorAll获取静态NodeList
            MAP_DIVS = document.querySelectorAll(".map");
            checkMap();
        });

        function checkMap() {
            // 用ref时需访问.value，普通变量直接打印activeMap
            console.log(activeMap.value);
            setTimeout(checkMap, 1000);
        }

        function createToggleBtn(parentDiv, divControlled, btnText, toggleFunc) {
            var btn = document.createElement("button");
            btn.classList.add("toggle_btn");
            btn.innerText = btnText;
            btn.value = divControlled;
            btn.onclick = function () {
                toggleFunc(divControlled);
            };
            document.getElementById(parentDiv).appendChild(btn);
            return btn;
        }

        function toggleMap(divName) {
            // 直接赋值传入的地图ID
            activeMap.value = divName;
        }

        return {
            checkMap,
            toggleMap,
            createToggleBtn,
        };
    },
});
</script>

额外说明 #

• document.getElementsByClassName返回动态HTMLCollection，会随DOM变化自动更新；document.querySelectorAll返回静态NodeList，更适合固定DOM场景；
• 若无需activeMap在模板中响应式更新，可去掉ref相关代码，改用普通let声明变量，逻辑保持一致。

内容的提问来源于stack exchange，提问作者Michael Steidel