Question

我正在尝试将Blockly（通过node-blockly从npm）导入到VueJS组件中，但Blockly的javascript部分包含getElementById（）调用，这会导致错误 document.getElementById（） 在VueJS中不可用。

知道怎么解决这个问题吗？

（编辑）代码示例：

<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

我认为是v2。

试试mounted event

＆＃13;

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

＆＃13;

Answer 2

假设您使用的是VueJS版本2，则可以在模板中标记元素后使用this.$refs.myElement访问元素的引用。

示例：

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

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

然后，为您的工具箱做同样的事情。

Answer 3

这对我有用

<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')
           });

  ....
},

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

3 个答案: