1

我有一些组件、javascript 和需要按特定顺序运行的元素。

第一个 -opensheetmusicdisplay.min.js我在我的 index.html 文件中。这不是问题。

第二 -<div id="xml">

第三 -xml-loader.js这取决于“xml” div 和opensheetmusicdisplay.min,js

这是 index.html：

<!DOCTYPE html>
<html lang="en">
  <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({
    mode: 'history',
    routes: [
        { path: '/',
          components: {
              maininfo: HomePage
          }
        },
        { path: '/chromatic-scales/c-chromatic-scale',
          components: {
              maininfo: Notation// ,
              // xmlloader: XLoad
          }
        }
    ]
})


new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
})

我注册XmlJs为全球性的，因为这是 100 件实际有效的事情中唯一的出路。然后我像这样嵌入它Notation.vue：

<template>
<div>

  <div id="xml">
    {{ notation.data }}
  </div>
  <xml-js />
</div>
</template>

<script>
import axios from 'axios'


export default ({
data () {
return {
notation: null,
}
},
mounted () {
axios
    .get('http://localhost:3000/chromatic-scales/c-chromatic-scale')
    .then(result => (this.notation = result))
}})


</script>

<style scoped></style>

最后一个文件是我正在尝试做的肉和土豆。为了呈现我想要的输出，它会xml-loader.js从数据中获取数据<div id="xml">并执行程序所做的任何魔术。问题是似乎无论如何都没有等待{{ notation.data }}.

我一般不熟悉使用 vuejs 和前端 javascript 框架。我确实认识到此时代码可能不是最佳的。

4

2 回答 2

2

存在竞争条件，即 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
}})
于 2020-04-06T07:36:28.380 回答
0

您可以将 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
  }
}
于 2020-04-06T07:30:26.380 回答