I'm currently working with a VueJS single File component that has the following template:
<template>
<div class="row">
<div class="col-md-12">
<div id="hottable"></div>
</div>
</div>
</template>
Along with the script below:
<script>
// Import all Handsontable dependencies
export default {
props: ['jsondata'],
data () {
return {}
},
methods: {
populateTable: function() {
var container = document.getElementById('hottable')
console.log('container: ' + container)
}
},
watch: {
jsondata: function () {
this.populateTable()
}
}
}
When inspecting the browser, I can see that
<div data-v-270950bf id='hottable'></div>
exists. However, when running the code, the console displays:
container: null
I am struggling to figure out why the container is null despite it being present in the HTML.