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

【问题标题】：Importing module that uses getElementById in VueJS component在 VueJS 组件中导入使用 getElementById 的模块
【发布时间】：2017-07-03 09:10:52
【问题描述】：

我正在尝试将 Blockly（通过 npm 的 node-blockly）导入 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>

【问题讨论】：

我不确定我是否理解。 document.getElementById 适用于 vue.js。你能提供一个不起作用的代码示例吗？
我认为您使用的是具有 eslint 的 webpack 版本？如果是，那么您需要在 eslintrc 中允许浏览器。如果这是您的情况，那么我将发布答案。
我在创建 webpack 项目（使用 vue cli）时选择不使用 eslint。

标签： vue.js vuejs2 blockly

【解决方案1】：

这对我有用

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

  ....
},

【讨论】：

更新 - 这种方法不允许 Blockly.JavaScript.workspaceToCode(workspace);正在调查。

【解决方案2】：

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

例子：

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

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

然后，对你的工具箱做同样的事情。

【讨论】：

【解决方案3】：

我想是 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>

【讨论】：

恐怕这并没有什么不同。调用注入时的 getElementById() 函数实际上不是问题。它是 Blockly JS 中的 getElementById()。我猜需要将其他元素（xml、工具箱等）正确注册为子组件。我会试试这个并在这里发布结果....