我有一些组件、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 importsimport Notation from '@/components/Notation'import HomePage from '@/components/HomePage'// component imports and registrationimport { 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
TA贡献1836条经验 获得超13个赞
存在竞争条件，即 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
}})
智慧大石
TA贡献1946条经验 获得超3个赞
您可以将 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
}
}
添加回答
举报
0/150
提交
取消