Question

我正在尝试在.vue文件中使用外部js文件，但出现错误：

[Vue warn]: Method "solarSystemAnimations" has type "object" in the component definition. Did you reference the function correctly?

found in

---> <SolarSystem> at src/views/SolarSystem.vue
       <App> at src/App.vue
         <Root>

我在/ src / assets / js / solarSystemAnimations中拥有外部js文件：

export default $(window).load(function() {
  var body = $("body"),
    universe = $("#universe"),
    solarsys = $("#solar-system")

   ...
 };

我的.vue文件如下：

<template>
  <div class="solarSystem" @load="solarSystemAnimations">
    <div class="opening hide-UI view-2D zoom-large data-close controls-close">
....
</template>

<script>
import solarSystemAnimations from "@/assets/js/solarSystemAnimations.js";

export default {
  name: "SolarSystem",
  methods: {
    solarSystemAnimations: solarSystemAnimations
  }
};
</script>

我看了无数帖子，但在我的情况下似乎没有任何效果。任何帮助，请提前感谢。

Answer 1

在Vue中，通常会使用lifecyle挂钩在DOM加载的特定阶段调用函数。由于您引用的是窗口负载，因此Vue等效项将是已安装的挂钩。您可以在Vue组件（没有外部文件）中像这样重构：

methods: {
functionBlah () {
      const body = document.getElementsByTagName("BODY")[0],
        universe = document.getElementById("#universe"),
        solarsys = document.getElementById("#solar-system")
       ...
     }
},

mounted() {
this.functionBlah();
}

在vue组件中加载外部JS文件

1 个答案: