javascript - 如何调试 VueJS getElementById 问题

Question

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

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

以及以下脚本:

<script>
//import all handsontable deps
export default {
  props: ['jsondata'],
  data () {
      return {}
  },
  methods: {
    populateTable: function() {
      var container = document.getElementById('hottable')
      console.log('container: ' + container)
    }
  },
  watch: {
    jsondata: function () {
      this.populateTable()
    }
  }
}

在浏览器中我可以看到

<div data-v-270950bf id='hottable'></div>

存在，但是当我运行代码时，我在控制台中看到以下内容:

container: null

我一生都无法弄清楚为什么容器为空

Answer 1

似乎工作正常:https://jsfiddle.net/wostex/63t082p2/47/

但是如果您手动操作 DOM，这不是最佳实践。它限制了您使用 react 性属性的可能性。

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