Home > front end >  Get width of parent element in Vue js
Get width of parent element in Vue js

Time:01-18

I am trying to implement a component named CamViewMatrix in Vue.js. My requirement is to get the width of CamViewMatrix's parent inside itself (say in created() method of CamViewMatrix) so that I can make some calculations with it (there are some time-based charts that need to be made responsive which is not possible unless an initial value for width is in hand).

<div>
  <div class='controller-wrapper'>
    ...
  </div>
  <CamViewMatrix v-bind:cameras='cams' />
</div>

I tried assigning an id to its parent and passed the same as a prop to CamViewMatrix, and attempts to getElementById, but it's not able to. Code given below:

<div id='parentid'>
  <div class='controller-wrapper'>
    ...
  </div>
  <CamViewMatrix v-bind:cameras='cams' parentId='parentid' />
</div>

And inside CamViewMatrix component:

<script>
export default {
  name: 'CamViewMatrix',
  props: {
    parentId: {
      type: String,
      required: true,
    },
    ...
  },
  created() {
    console.log(document.getElementById(this.parentId)); //            
  •  Tags:  
  • Related