在 VueJS 组件中导入使用 getElementById 的模块

Question

I am trying to import Blockly (via node-blockly from npm) into a VueJS component, but the javascript part of Blockly contains getElementById() calls, which causes an error as document.getElementById() is not available in VueJS.

Any idea how to get around this?

(Edit) Code Example:

<template> 
 <div class="hello"> 
   <div id="blocklyDiv" style="height: 480px; width: 600px;">
   </div> 
    <xml id="toolbox" ref=toolbox style="display: none"> 
     <block type="controls_if"></block> 
     <block type="text"></block> <block type="text_print"></block> 
    </xml> 
   </div> 
</template> 
<script> 
 import Blockly from "node-blockly" 
 export default { name: 'hello' } 
 var workspace = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox')}); 
</script>

Answer 1

I supose is v2.

Try in mounted event

 <template> <div class="hello"> <div id="blocklyDiv" style="height: 480px; width: 600px;"> </div> <xml id="toolbox" ref=toolbox style="display: none"> <block type="controls_if"></block> <block type="text"></block> <block type="text_print"></block> </xml> </div> </template> <script> import Blockly from "node-blockly" export default { name: 'hello', data(){ return { workspace: null } }, mounted(){ this.workspace = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox')}); } } </script>

Answer 2

Assuming you are using VueJS version 2, you can access the reference to an element using this.$refs.myElement after tagging your element in the template.

Example:

<div ref="blocklyDiv" style="height: 480px; width: 600px;">

mounted () {
  this.workspace = Blockly.inject(this.$refs.blocklyDiv);
}

Then, just do the same for your toolbox.

Answer 3

This works for me

<script>
export default {
    mounted() {
        console.log('blockly');
           var workspace = Blockly.inject('blocklyDiv', {
             toolbox: document.getElementById('toolbox')
           });

           var blocklyArea = document.getElementById('blocklyArea');
           var blocklyDiv = document.getElementById('blocklyDiv');

           var workspace = Blockly.inject(blocklyDiv, {
              toolbox: document.getElementById('toolbox')
           });

  ....
},