I have been working on implementing a Vue.js component called CamViewMatrix. My goal is to retrieve the width of CamViewMatrix's parent element within the component itself (specifically in the created() method of CamViewMatrix), in order to perform some calculations with it. This is necessary for creating responsive time-based charts, which require an initial width value to work properly.
<div>
<div class='controller-wrapper'>
...
</div>
<CamViewMatrix v-bind:cameras='cams' />
</div>
I attempted to assign an id to the parent element and pass it as a prop to CamViewMatrix. I then tried to retrieve the parent element using getElementById, but unfortunately, it did not work. See the code snippet below:
<div id='parentid'>
<div class='controller-wrapper'>
...
</div>
<CamViewMatrix v-bind:cameras='cams' parentId='parentid' />
</div>
And here's the relevant section inside the CamViewMatrix component:
<script>
export default {
name: 'CamViewMatrix',
props: {
parentId: {
type: String,
required: true,
},
...
},
created() {
console.log(document.getElementById(this.parentId)); // 👈️ logs null
...
}
}
Unfortunately, with the above code, I was unable to retrieve the parent element (it's logging null). I also tried using ref and $parent, but encountered the same issue. I would greatly appreciate any assistance you can provide with this problem.
Thank you in advance.