Every time I attempt to retrieve the contents of an id using document.getElementById, I keep receiving a value of null. Below is a snippet of the code:
<input-layout v-if="edit" label="Status" class="grayout">
<u-select v-model='test.status' :options="testStatus" tabindex="14" class="grayout" id="testStatusDropDown"/>
</input-layout>
<input id="input1" type="checkbox">
It's important to note that, when evaluated, v-if="edit" returns true.
Within the mounted lifecycle hook, the following code resides:
mounted () {
this.$nextTick(function (){
console.log(document.getElementById("input1"))
console.log(document.getElementById("testStatusDropDown"))
})
},
Without the console.log statements in the mounted method, both input1 and testStatusDropDown returned null. This behavior is attributed to those elements not existing yet when that section of the code executes. Moving them into the mounted method allowed me to see
<input id="input1" type="checkbox">null.
I consulted the Vue.js mounted API documentation at: https://v2.vuejs.org/v2/api/#mounted. Based on what I gathered, mounted does not guarantee that all child components have finished mounting, thus requiring the use of this.$nextTick within the mounted method. Despite implementing this.$nextTick, I continue to encounter the issue where
document.getElementById("testStatusDropDown")null instead of displaying <u-select v-model='test.status' :options="testStatus" tabindex="14" class="grayout" id="testStatusDropDown"/>Is my expectation misguided? What adjustments should be made to prevent
document.getElementById("testStatusDropDown")null?