VueJS；在运行本地 JavaScript 文件之前等待元素
我有一些组件、javascript 和需要按特定顺序运行的元素。
第一个 -opensheetmusicdisplay.min.js我在我的 index.html 文件中。这不是问题。
第二 -<div id="xml">
第三 -xml-loader.js这取决于“xml” div 和opensheetmusicdisplay.min,js
这是 index.html：
<!DOCTYPE html>
<html>
<head>
<script rel="preload" src="<%= BASE_URL %>js/osmd/opensheetmusicdisplay.min.js"></script>
</head>
<body>
<div id="xml2">words go here</div>
<div id="app"></div>
</body>
</html>
这是我试图测试的 JavaScript 部分：
window.onload = function() {
alert("xx == ", document.getElementById("xml2"));
}
alert("xx2 == ", document.getElementById("xml2"));
alert(JSON.stringify(opensheetmusicdisplay, null, 1));
当我运行它时，它们都是"xml2"显示空白的实例。确实显示数据，这意味着它正在从部分中opensheetmusicdisplay的源读取headindex.html
在评论中向我指出，警报只接受一个论点。这是一个错误，我暂时搁置一下。控制台中的错误是 TypeError: document.getElementById(...) is null。
现在，这是 main.js。由于我的各种想法，有很多评论：
// vue 导入和配置 import Vue from 'vue' import App from '@/App' import VueRouter from 'vue-router'
Vue.use(VueRouter) Vue.config.productionTip = false
// page imports
import Notation from '@/components/Notation'
import HomePage from '@/components/HomePage'
// component imports and registration
import { FoundationCSS } from '@/../node_modules/foundation-sites/dist/css/foundation.min.css'
Vue.component('foundation-css', FoundationCSS)
import SideNav from '@/components/SideNav'
Vue.component('side-nav', SideNav);
// import * as Osmd from '@/../public/js/osmd/opensheetmusicdisplay.min.js'
// Vue.component('osmd-js', Osmd)
// import { OsmdJs } from '@/components/Osmd'
import * as XmlJs from '@/../public/js/osmd/xml-loader.js'
Vue.component('xml-js', XmlJs)
// import XLoad from '@/components/XmlLoader'
const router = new VueRouter({
最后一个文件是我正在尝试做的肉和土豆。为了呈现我想要的输出，它会xml-loader.js从数据中获取数据<div id="xml">并执行程序所做的任何魔术。问题是似乎无论如何都没有等待{{ notation.data }}.
我一般不熟悉使用 vuejs 和前端 javascript 框架。我确实认识到此时代码可能不是最佳的。
子衿沉夜2回答
-
开心每一天1111
存在竞争条件，即 DOM 元素在访问时不可用。解决方案是不访问由 Vue 在其外部创建的 DOM 元素。DOM 元素只有在异步请求后才可以使用：<template><div> <div ref="xml" id="xml"> {{ notation.data }} </div> <xml-js /></div></template><script>import axios from 'axios'export default ({data () {return {notation: null,}},async mounted () { const result = await axios .get('http://localhost:3000/chromatic-scales/c-chromatic-scale') this.notation = result; this.$nextTick(); // wait for re-render renderXml(this.$ref.xml); // pass DOM element to third-party renderer}}) -
智慧大石
您可以将 xml-loader.js 作为函数导入 Notation.vue。然后你可以简单地做这样的事情：mounted () { axios.get(PATH).then(result => { this.notation = result let xmlResult = loadXML(result) doSomethingWithResult(xmlResult) }},methods: { doSomethingWithResult (result) { // do something }}
随时随地看视频慕课网APP
相关分类
JavaScript