当我遇到这个问题时，我正在遵循Kevin Powell关于创建响应式导航栏的教程。看起来我的'const primary_nav = document.querySelector（“.primary-navigation”）'返回null值，即使类名存在。这个问题对我来说很奇怪，知道为什么我的代码返回null吗？
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const navigations = [
{ path: '/about', name: 'About' },
{ path: '/register', name: 'Create account' },
{ path: '/login', name: 'Login' },
];
const primary_nav = document.querySelector(".primary-navigation");
console.log('primary_nav: ', primary_nav);
const nav_toggle = () => {
const visibility = primary_nav?.getAttribute("data-visible");
console.log('visibility: ', visibility);
}
</script>
<template>
<header class="primary-header flex">
<div>
<img class="logo" src="src/assets/Missandei-Logo.png" />
</div>
<button @click="nav_toggle" class="mobile-nav-toggle display-none" aria-controls="primary-navigation"
aria-expanded="false">
<span class="sr-only">
Menu
</span>
</button>
<nav>
<ul id="primary-navigation" data-visible="false" class="primary-navigation flex">
<li class="active" v-for="(navigation, index) in navigations" :key="index">
<a>
<span aria-hidden="true">{{ index }}</span>{{ navigation.name }}
</a>
</li>
</ul>
</nav>
</header>
</template>
1条答案
按热度按时间o0lyfsai1#
我听从了Jaromandax的建议，这就是我的想法。我没有使用JavaScript数据属性，而是从Vue.js文档中找到了这个ref（）方法，并使用它创建了一个名为isMobileNavigationVisible的响应式变量，该变量的默认值为false。然后我将其绑定到类中并创建一个条件语句，其中如果isMobileNavigationVisible为true，则将呈现移动导航栏。