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

我试图将Blockly（通过节点块从npm）导入到VueJS组件中，但Blockly的javascript部分包含getElementById（）调用，这会导致错误，如文档.getElementById（）在VueJS中不可用。在VueJS组件中使用getElementById的导入模块

任何想法如何解决这个问题？

（编辑）代码示例：

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

来源

2017-02-14 Dirk Rejahl

我不知道我的理解。 document.getElementById可以很好地处理vue.js.你能提供一个不起作用的代码示例吗？ – retrograde

我认为你使用的是具有eslint的webpack版本？如果是，那么你需要在eslintrc中允许浏览器。如果这是你的情况，那么我会发布一个答案。 –

当我创建webpack项目（使用vue cli）时，我选择了eslint。 –

我supose为V2。

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

来源

2017-02-15 07:35:34

恐怕没有什么区别。调用注入时的getElementById（）函数实际上不是问题。它是Blockly JS中的一个getElementById（）。我想附加元素（XML，工具箱等）需要正确注册为子组件。我将尝试此操作，并在此处发布结果.... –

假设您尝试使用VueJS第2版，您可以在模板标记您的元素之后访问参考使用this.$refs.myElement的元素。

例子：

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

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

然后，只需做同样的你的工具箱。

来源

2017-04-20 01:24:32 Vincent

这对我的作品

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

    .... 
},

来源

2017-08-15 15:05:19 Dazzle

更新 - 此方法不允许执行Blockly.JavaScript.workspaceToCode（workspace）;调查。 – Dazzle

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

回答

相关问题