VueJS 구성 요소에서 getElementById를 사용하는 모듈을 가져오는 중

VueJS 구성 요소에서 getElementById를 사용하는 모듈을 가져오는 중

Blockly를 (npm에서 노드 블록 경유로) VueJS 컴포넌트로 Import하려고 하는데 Blockly의 javascript 부분에 getElementById() 콜이 포함되어 있어 document.getElementById()는 VueJ에서 사용할 수 없습니다.

이 문제를 어떻게 해결할지 알고 있나요?

(편집) 코드 예시:

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

나는 v2라고 가정한다.

마운트된 이벤트에서 시도

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

VueJS 버전2 를 사용하고 있는 경우는, 다음의 방법으로 요소에의 참조에 액세스 할 수 있습니다.this.$refs.myElement템플릿에서 요소에 태그를 지정한 후.

예:

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

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

그리고 나서, 여러분의 도구 상자에도 똑같이 하세요.

난 이거면 돼

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

  ....
},

언급URL : https://stackoverflow.com/questions/42236989/importing-module-that-uses-getelementbyid-in-vuejs-component