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，这不是最好的做法。它限制了您使用反应特性的可能性。

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

如何调试VueJS getElementById问题

1 个答案: