Импорт модуля, который использует getElementById в компоненте VueJS

Question

Я пытаюсь импортировать Blockly (через узлоблочно из npm) в компонент VueJS, но часть javascript блока содержит вызовы getElementById(), что вызывает ошибку как document .getElementById() не доступен в VueJS.

Любая идея, как обойти это?

(Edit) Пример кода:

<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 является v2.

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

Предполагая, что вы используете 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') 
      }); 

    .... 
},