如何解决Vue.js组件中的脚本未执行
我为导航栏创建了一个组件,并将其加载到标题组件中。它已呈现并按预期工作。我唯一的问题是脚本,例如安装的函数未执行。这真的很奇怪,因为在其他可以正常工作的组件中。
导航组件
<template>
<div id="header-top">
<img id="logo" src="../assets/img/logo.png" alt="Logo" draggable="false" />
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/abc">abc</router-link>
<router-link to="/cba">cba</router-link>
<router-link to="/def">edf</router-link>
</div>
</div>
</template>
<script>
export default {
mounted() {
let headerTop;
window.addEventListener("scroll",function() {
if (!headerTop) headerTop = document.getElementById("header-top");
if (window.scrollY !== 0 && headerTop) {
headerTop.classList.add("header-top-home-scrolled","header-scrolled");
} else if (headerTop) {
headerTop.classList.remove("header-top-home-scrolled");
}
});
}
}
</script>
标题(我在其中导入和使用导航)
<template>
<header id="header-home">
<Nav/>
<div id="header-home-content">
<h1>Lorem ipsum</h1>
</div>
</header>
</template>
<script>
import Nav from '@/components/Nav'
export default {
components: {
Nav
}
}
</script>
如果您发现错误,请告诉我。预先感谢。
解决方法
我看不到为什么它不起作用,我在codepen上复制了代码,并且效果很好。
不建议手动操作DOM,并尽力避免使用它。这是编写该组件的另一种方法:
<template>
<div :class="headerClass">
<img id="logo" src="../assets/img/logo.png" alt="Logo" draggable="false" />
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/abc">abc</router-link>
<router-link to="/cba">cba</router-link>
<router-link to="/def">edf</router-link>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hasBodyScrolled: false
}
},mounted() {
window.addEventListener('scroll',this.onScroll,{ passive: true });
},destroyed() {
window.removeEventListener('scroll',this.onScroll)
},computed: {
headerClass() {
return {
'header-top-home-scrolled': true,'header-scrolled': this.hasBodyScrolled
}
}
},methods: {
onScroll() {
this.hasBodyScrolled = window.scrollY !== 0;
}
}
}
</script>
在这里,我们只是使用computed property来确定标题的类。它取决于hasBodyScrolled
数据属性。方法onScroll
会将hasBodyScrolled
的值更改为布尔值。
在模板中,我们仅将计算属性用作标题的类名。了解有关class and style bindings的更多信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。