Javascript 如何调试VueJS getElementById问题

我正在使用具有以下模板的VueJS单文件组件：

<template>
        <div class="row">
            <div class="col-md-12">
                <div id="hottable"></div>
            </div>
        </div>
</template>

我一辈子都搞不清楚为什么容器为空

似乎工作正常：

但是，如果手动操作DOM，这不是最佳实践。它限制了你的可能性与反应性质

<div id="app">
  <child></child>
</div>

new Vue({
    el: '#app',
    components: {
    'child': {
      template: `
        <div class="row">
            <div class="col-md-12">
                <div id="hottable"></div>
            </div>
        </div>`,
      mounted() {
        let c = document.getElementById('hottable');
        console.log(c);
      }
    }
  }
});

新Vue({
el:“#应用程序”，
组成部分：{
“孩子”：{
模板：`
`,
安装的（）{
设c=document.getElementById（'hottable'）；
控制台日志（c）；
}
}
}
});

似乎工作正常：

但是，如果手动操作DOM，这不是最佳实践。它限制了你的可能性与反应性质

<div id="app">
  <child></child>
</div>

new Vue({
    el: '#app',
    components: {
    'child': {
      template: `
        <div class="row">
            <div class="col-md-12">
                <div id="hottable"></div>
            </div>
        </div>`,
      mounted() {
        let c = document.getElementById('hottable');
        console.log(c);
      }
    }
  }
});

新Vue({
el:“#应用程序”，
组成部分：{
“孩子”：{
模板：`
`,
安装的（）{
设c=document.getElementById（'hottable'）；
控制台日志（c）；
}
}
}
});

您不应该尝试直接访问DOM，当然这是不可靠的，因为在您尝试访问DOM时，该元素不在那里。@dfsq您建议我在“mounted”方法中调用populateTable（并访问DOM）吗？我建议永远不要像现在这样直接访问DOM。即使在mounted中。您也不应该尝试直接访问DOM，这当然是不可靠的，因为在您尝试访问DOM时，该元素不在那里。@dfsq您建议我在“mounted”方法中调用populateTable（并访问DOM）吗？我建议永远不要像现在这样直接访问DOM。即使在已安装的情况下，也要注意。然而，当我尝试从挂载的组件访问时，我仍然得到组件为空。我需要研究vue handsontable的包装，因为vanilla js handsontable示例直接访问dom。@proximacentauri您也可以访问组件模板标记，如下所示：

this.$el

。我还没有对此进行测试，但我想这种方法应该适用于handsontable库：好的，重点是。然而，当我尝试从挂载的组件访问时，我仍然得到组件为空。我需要研究vue handsontable的包装，因为vanilla js handsontable示例直接访问dom。@proximacentauri您也可以访问组件模板标记，如下所示：

this.$el

。我还没有对此进行测试，但我想这种方法应该适用于handsontable库：

container: null

<div id="app">
  <child></child>
</div>

new Vue({
    el: '#app',
    components: {
    'child': {
      template: `
        <div class="row">
            <div class="col-md-12">
                <div id="hottable"></div>
            </div>
        </div>`,
      mounted() {
        let c = document.getElementById('hottable');
        console.log(c);
      }
    }
  }
});