[Vuejs]-Vue – Setting the width of a component dynamically

by

4👍

✅

You just need binding which uses : before props:

<Slide
      ref="slideToggle"
      disable-esc
      class="slideToggle"
      :width="width"
      right
      :burger-icon="false"
      :cross-icon="false"
      disable-outside-click
>

And then in your data in js part:

export default {
     data:() => ({   width: '470'  }),
}

Now you just need to change width variable. For example:

export default {
     data:() => ({   width: '470'  }),
     methods:{
          changeWidth(){
               this.width = '1000';
          }
     }
}

You can read more about binding variables from the doc: Vue Props

👤Alireza HI

0👍

Listen on window width event:

data: () => ({
  width: 470
})
created() {
  window.addEventListener("resize", this.changeWidth);
},
destroyed() {
  window.removeEventListener("resize", this.changeWidth);
},
methods: {
  changeWidth(e) {
    const screenWidth = window.innerWidth;
    this.width = screenWidth
  }
}

and set width in Slide component:

<Slide
      ref="slideToggle"
      disable-esc
      class="slideToggle"
      :width="width"
      right
      :burger-icon="false"
      :cross-icon="false"
      disable-outside-click
    >
👤BeHappy

Leave a comment