Загрузка внешнего файла JS в компоненте vue - PullRequest
Новая
       40

Загрузка внешнего файла JS в компоненте vue

0 голосов
/ 17 июня 2019

Я пытаюсь использовать внешний файл js в своем файле .vue, но получаю ошибку: 

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

У меня есть внешний файл js в / src / assets / js / solarSystemAnimations: 

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>

Я просмотрел множество сообщений, но в моей ситуации, похоже, ничего не работает.Любая помощь оценена заранее.

1 Ответ

1 голос
/ 17 июня 2019

В Vue вы обычно используете ловушку жизненного цикла для вызова функции на определенном этапе загрузки DOM. Поскольку вы ссылаетесь на загрузку окна, эквивалент Vue будет смонтированным хуком. Вы можете выполнить рефакторинг следующим образом в компоненте Vue (без внешнего файла): 

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

mounted() {
this.functionBlah();
}
...