Vue.js 组件中的脚本未执行答案

【问题标题】：Script in Vue.js component isn't executedVue.js 组件中的脚本未执行
【发布时间】：2020-12-09 16:56:32
【问题描述】：

我为导航栏创建了一个组件，并将其加载到我的标题组件中。它被渲染并按预期工作。我唯一的问题是脚本，例如未执行已安装的功能。这真的很奇怪，因为在其他组件中正常工作。

导航组件

<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>

如果您发现错误，请告诉我。提前致谢。

【问题讨论】：

你怎么知道它没有被执行？我建议在函数的开头放置一些控制台日志记录。还要对模板进行一些任意更改以确认它不是缓存问题，然后刷新页面以强制安装。
我这样做了，控制台中没有输出。问题不是缓存引起的，我也测试过。
您能否确认一下，您是否尝试按照我的建议对模板进行任意更改？这是一个重要的诊断测试，不仅仅是为了确保它不是缓存问题。您是否还可以检查您的组件是否只有一个 <script> 部分？
Omfg，样式下确实有第二个脚本块。哇，我犯了一个多么愚蠢的错误。感谢您的帮助！

标签： javascript vue.js vue-component

【解决方案1】：

我不明白为什么它不起作用，我在 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。

【讨论】：